hr-design-system-handlebars 0.121.2 → 0.121.4

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# v0.121.4 (Mon Jan 23 2023)
+
+#### 🐛 Bug Fix
+
+- :art: Correct rounded corner for group teaser [#496](https://github.com/mumprod/hr-design-system-handlebars/pull/496) ([@Sunny1112358](https://github.com/Sunny1112358))
+
+#### Authors: 1
+
+- [@Sunny1112358](https://github.com/Sunny1112358)
+
+---
+
+# v0.121.3 (Fri Jan 20 2023)
+
+#### 🐛 Bug Fix
+
+- Dpe 2007 2 [#495](https://github.com/mumprod/hr-design-system-handlebars/pull/495) ([@StefanVesper](https://github.com/StefanVesper))
+
+#### Authors: 1
+
+- SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
+
+---
+
 # v0.121.2 (Fri Jan 20 2023)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -672,7 +672,7 @@ video {
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 rgba(0,0,0,0);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 rgba(0,0,0,0));
   --tw-ring-inset: inset;
-  --tw-ring-color: currentColor;
+  --tw-ring-color: var(--color-focus-state);
 }
 .ds-link-inset:focus:not(:focus-visible) {
   --tw-shadow: 0 0 rgba(0,0,0,0);
@@ -1037,6 +1037,9 @@ video {
 .-z-1000 {
   z-index: -1000;
 }
+.z-9999 {
+  z-index: 9999;
+}
 .order-1 {
   order: 1;
 }
@@ -1615,9 +1618,6 @@ video {
 .rounded-full {
   border-radius: 9999px;
 }
-.rounded-3xl {
-  border-radius: 1.5rem;
-}
 .rounded-lg {
   border-radius: 0.5rem;
 }
@@ -1652,12 +1652,6 @@ video {
   border-bottom-right-radius: 0px;
   border-bottom-right-radius: var(--border-radius-hr);
 }
-.rounded-tr-none {
-  border-top-right-radius: 0px;
-}
-.rounded-bl-none {
-  border-bottom-left-radius: 0px;
-}
 .border {
   border-width: 1px;
 }
@@ -2483,7 +2477,7 @@ video {
   transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
 .counter-reset {
-  counter-reset: cnt1674225670640;
+  counter-reset: cnt1674468048062;
 }
 .line-clamp-4 {
   overflow: hidden;
@@ -2701,7 +2695,7 @@ video {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1674225670640 1;
+  counter-increment: cnt1674468048062 1;
 }
 .-ordered::before {
   position: absolute;
@@ -2717,7 +2711,7 @@ video {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1674225670640);
+  content: counter(cnt1674468048062);
 }
 /*! ****************************/
 /*! text-shadow                */
@@ -4182,13 +4176,6 @@ video {
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 4;
   }
-
-  .md\:line-clamp-2 {
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-  }
     .md\:ar-16-9 {
         aspect-ratio: 16 / 9;
     }
@@ -4664,6 +4651,13 @@ video {
     -webkit-line-clamp: 5;
   }
 
+  .lg\:line-clamp-2 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+  }
+
     .lg\:col-main {
         grid-column: main;
     }

package/dist/views/components/content_nav/content_nav_container.hbs

@@ -6,7 +6,7 @@
     {{#if this.isAutosuggest}}
         <div class="flex mx-0 w-full h-10 border-blue-congress align-center{{#if _autoSuggestContainerCss}} {{_autoSuggestContainerCss}}{{/if}}">
             <input x-ref="autosuggestInput"
-                   class="w-full h-10 pl-2 bg-gray-200 border-b-8 border-white text-grey-dark placeholder:text-grey-dark focus:outline-none js-autosuggest-input"
+                   class="w-full h-10 pl-2 bg-gray-200 border-b-8 border-white ds-link-inset text-grey-dark placeholder:text-grey-dark focus:outline-none js-autosuggest-input"
                    type="text"
                    placeholder="Eintrag filtern"/>
         </div>

package/dist/views/components/teaser/group_teaser/group_teaser_accented.hbs

@@ -1,6 +1,6 @@
 {{#if this.hasGroupItems}}
     {{#>components/grid/grid_group size=this.teaserSize }}
-        <div class="grid items-start content-start h-auto grid-cols-12 col-span-12 p-8 rounded-tr-none rounded-bl-none bg-highlight-1 rounded-3xl gap-x-6 gap-y-5">
+        <div class="grid items-start content-start h-auto grid-cols-12 col-span-12 p-8 rounded-tl-hr rounded-br-hr bg-highlight-1 gap-x-6 gap-y-5">
             {{~#if this.hasGroupTitle}}
                 <h2 class="text-2xl md:text-4xl col-span-full pt-0 pb-4 font-title {{#if this.backgroundColor}} text-center{{else}} headline-barrier{{/if}}">
                     {{~#if this.hasLink}}<a class="no-underline hover:underline decoration-1 md:decoration-2 text-blue-science" href="{{this.link.url}}">{{/if~}}

package/dist/views/components/teaser/podcast/podcast_playlist_player.hbs

@@ -18,21 +18,15 @@
           {{> components/teaser/podcast/podcast_title _title=this.title _teaserSize=this.teaserSize _addClass="" }}
         </div>
 
-        {{!-- Shorttext --}}
-        {{#unless _isSinglePage}}
-          {{#unless this.hideShortText}}
-            {{~#with this.shorttext}}
-              <div class="hidden pb-6 text-sm md:flex md:text-base font-copy">
-                <span class="c-teaser__shorttext"> {{this}} </span>
-              </div>
-            {{/with~}}
-          {{/unless}}
-        {{/unless}}
-
+        {{#switch this.teaserSize }}
+          {{#case 100}}
+            {{> components/teaser/podcast/podcast_playlist_shorttext}}
+          {{/case}}
+        {{/switch}}
       </div>
 
       {{!-- Podcast Image --}}
-      <div class="flex flex-col ">
+      <div class="flex flex-col pb-5">
         <div class="w-24 md:w-32 lg:w-42">
           {{> components/base/image/responsive_image this.teaseritem
             _type="podcastEpisodePlayer"
@@ -43,8 +37,16 @@
           }}
         </div>
       </div>
-
     </div>
+
+    {{#switch this.teaserSize }}
+      {{#case 50}}
+        <div class="flex flex-row w-full px-5 md:pl-5">
+          {{> components/teaser/podcast/podcast_playlist_shorttext}}
+        </div>
+      {{/case}}
+    {{/switch}}
+    
     {{!-- Abo-Dropdown --}}
     <div class="flex flex-row px-5 md:pr-0"> 
       {{> components/teaser/podcast/podcast_subscribe_button}}

package/dist/views/components/teaser/podcast/podcast_playlist_shorttext.hbs

@@ -0,0 +1,10 @@
+{{!-- Shorttext --}}
+{{#unless _isSinglePage}}
+    {{#unless this.hideShortText}}
+    {{~#with this.shorttext}}
+        <div class="hidden pb-6 text-sm md:flex md:text-base font-copy">
+        <span class="c-teaser__shorttext"> {{this}} </span>
+        </div>
+    {{/with~}}
+    {{/unless}}
+{{/unless}}

package/dist/views/components/teaser/podcast/podcast_subscribe_button.hbs

@@ -16,7 +16,7 @@
         x-on:keydown.escape.prevent.stop="close($refs.button)"
         x-on:focusin.window="! $refs.panel.contains($event.target) && close()"
         x-id="['dropdown-button']"
-        class="relative z-10 h-10"
+        class="relative h-10 z-9999"
     >
 
     {{!-- Button --}}
@@ -44,13 +44,13 @@
         x-on:click.outside="close($refs.button)"
         :id="$id('dropdown-button')"
         style="display: none;"
-        class="left-0 w-full px-2 text-sm text-white font-heading grow bg-podcast-highlight"
+        class="left-0 w-full text-sm text-white font-heading grow bg-podcast-highlight"
     >
         {{~#with this.podcastHoster~}}
         <ul>
             {{~#each this~}}
                 <li class="{{#unless @last}}border-b{{/unless}}"> 
-                    <a class="flex py-2 text-left ds-link whitespace-nowrap hover:underline disabled:text-gray-500"
+                    <a class="flex px-2 py-2 text-left ds-link whitespace-nowrap hover:underline disabled:text-gray-500"
                     title="{{this.podcastHosterName}}" 
                     target="_blank"
                     rel="noopener noreferrer"

package/dist/views/components/teaser/podcast/podcast_title.hbs

@@ -1,4 +1,4 @@
-{{#decorator 'components/base/link' _css="group ds-link font-title text-base mt-2.5 text-podcast-text line-clamp-4 md:line-clamp-2 ..." }} 
+{{#decorator 'components/base/link' _css="group ds-link font-title text-base mt-2.5 text-podcast-text line-clamp-4 lg:line-clamp-2 ..." }} 
     <span class="block mt-0.5 group-hover:underline {{#if _ordered}} pl-8 {{/if}} {{~ inline-switch _teaserSize '["hero","100","50"]''["text-base md:text-2xl","text-base md:text-2xl","text-base md:text-lg"]' ~}}">
         {{~_title~}}
     </span>

package/package.json

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

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

@@ -106,7 +106,7 @@
     }
 
     .ds-link-inset  {
-        @apply block focus:ring-inset focus:ring-4 focus:outline-none focus:ring-current ;    
+        @apply block focus:ring-inset focus:ring-4 focus:outline-none focus:ring-focus-state ;    
     }
 
     .ds-link-inset:focus:not(:focus-visible) {

package/src/stories/views/components/content_nav/content_nav_container.hbs

@@ -6,7 +6,7 @@
     {{#if this.isAutosuggest}}
         <div class="flex mx-0 w-full h-10 border-blue-congress align-center{{#if _autoSuggestContainerCss}} {{_autoSuggestContainerCss}}{{/if}}">
             <input x-ref="autosuggestInput"
-                   class="w-full h-10 pl-2 bg-gray-200 border-b-8 border-white text-grey-dark placeholder:text-grey-dark focus:outline-none js-autosuggest-input"
+                   class="w-full h-10 pl-2 bg-gray-200 border-b-8 border-white ds-link-inset text-grey-dark placeholder:text-grey-dark focus:outline-none js-autosuggest-input"
                    type="text"
                    placeholder="Eintrag filtern"/>
         </div>

package/src/stories/views/components/teaser/group_teaser/group_teaser_accented.hbs

@@ -1,6 +1,6 @@
 {{#if this.hasGroupItems}}
     {{#>components/grid/grid_group size=this.teaserSize }}
-        <div class="grid items-start content-start h-auto grid-cols-12 col-span-12 p-8 rounded-tr-none rounded-bl-none bg-highlight-1 rounded-3xl gap-x-6 gap-y-5">
+        <div class="grid items-start content-start h-auto grid-cols-12 col-span-12 p-8 rounded-tl-hr rounded-br-hr bg-highlight-1 gap-x-6 gap-y-5">
             {{~#if this.hasGroupTitle}}
                 <h2 class="text-2xl md:text-4xl col-span-full pt-0 pb-4 font-title {{#if this.backgroundColor}} text-center{{else}} headline-barrier{{/if}}">
                     {{~#if this.hasLink}}<a class="no-underline hover:underline decoration-1 md:decoration-2 text-blue-science" href="{{this.link.url}}">{{/if~}}

package/src/stories/views/components/teaser/podcast/podcast_playlist_player.hbs

@@ -18,21 +18,15 @@
           {{> components/teaser/podcast/podcast_title _title=this.title _teaserSize=this.teaserSize _addClass="" }}
         </div>
 
-        {{!-- Shorttext --}}
-        {{#unless _isSinglePage}}
-          {{#unless this.hideShortText}}
-            {{~#with this.shorttext}}
-              <div class="hidden pb-6 text-sm md:flex md:text-base font-copy">
-                <span class="c-teaser__shorttext"> {{this}} </span>
-              </div>
-            {{/with~}}
-          {{/unless}}
-        {{/unless}}
-
+        {{#switch this.teaserSize }}
+          {{#case 100}}
+            {{> components/teaser/podcast/podcast_playlist_shorttext}}
+          {{/case}}
+        {{/switch}}
       </div>
 
       {{!-- Podcast Image --}}
-      <div class="flex flex-col ">
+      <div class="flex flex-col pb-5">
         <div class="w-24 md:w-32 lg:w-42">
           {{> components/base/image/responsive_image this.teaseritem
             _type="podcastEpisodePlayer"
@@ -43,8 +37,16 @@
           }}
         </div>
       </div>
-
     </div>
+
+    {{#switch this.teaserSize }}
+      {{#case 50}}
+        <div class="flex flex-row w-full px-5 md:pl-5">
+          {{> components/teaser/podcast/podcast_playlist_shorttext}}
+        </div>
+      {{/case}}
+    {{/switch}}
+    
     {{!-- Abo-Dropdown --}}
     <div class="flex flex-row px-5 md:pr-0"> 
       {{> components/teaser/podcast/podcast_subscribe_button}}

package/src/stories/views/components/teaser/podcast/podcast_playlist_shorttext.hbs

@@ -0,0 +1,10 @@
+{{!-- Shorttext --}}
+{{#unless _isSinglePage}}
+    {{#unless this.hideShortText}}
+    {{~#with this.shorttext}}
+        <div class="hidden pb-6 text-sm md:flex md:text-base font-copy">
+        <span class="c-teaser__shorttext"> {{this}} </span>
+        </div>
+    {{/with~}}
+    {{/unless}}
+{{/unless}}

package/src/stories/views/components/teaser/podcast/podcast_subscribe_button.hbs

@@ -16,7 +16,7 @@
         x-on:keydown.escape.prevent.stop="close($refs.button)"
         x-on:focusin.window="! $refs.panel.contains($event.target) && close()"
         x-id="['dropdown-button']"
-        class="relative z-10 h-10"
+        class="relative h-10 z-9999"
     >
 
     {{!-- Button --}}
@@ -44,13 +44,13 @@
         x-on:click.outside="close($refs.button)"
         :id="$id('dropdown-button')"
         style="display: none;"
-        class="left-0 w-full px-2 text-sm text-white font-heading grow bg-podcast-highlight"
+        class="left-0 w-full text-sm text-white font-heading grow bg-podcast-highlight"
     >
         {{~#with this.podcastHoster~}}
         <ul>
             {{~#each this~}}
                 <li class="{{#unless @last}}border-b{{/unless}}"> 
-                    <a class="flex py-2 text-left ds-link whitespace-nowrap hover:underline disabled:text-gray-500"
+                    <a class="flex px-2 py-2 text-left ds-link whitespace-nowrap hover:underline disabled:text-gray-500"
                     title="{{this.podcastHosterName}}" 
                     target="_blank"
                     rel="noopener noreferrer"

package/src/stories/views/components/teaser/podcast/podcast_title.hbs

@@ -1,4 +1,4 @@
-{{#decorator 'components/base/link' _css="group ds-link font-title text-base mt-2.5 text-podcast-text line-clamp-4 md:line-clamp-2 ..." }} 
+{{#decorator 'components/base/link' _css="group ds-link font-title text-base mt-2.5 text-podcast-text line-clamp-4 lg:line-clamp-2 ..." }} 
     <span class="block mt-0.5 group-hover:underline {{#if _ordered}} pl-8 {{/if}} {{~ inline-switch _teaserSize '["hero","100","50"]''["text-base md:text-2xl","text-base md:text-2xl","text-base md:text-lg"]' ~}}">
         {{~_title~}}
     </span>