hr-design-system-handlebars 1.11.0 → 1.11.2

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# v1.11.2 (Tue Mar 21 2023)
+
+#### 🐛 Bug Fix
+
+- Bugfix/dpe 2198 z indexes sometimes clash with old navi [#592](https://github.com/mumprod/hr-design-system-handlebars/pull/592) ([@StefanVesper](https://github.com/StefanVesper))
+
+#### Authors: 1
+
+- SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
+
+---
+
+# v1.11.1 (Mon Mar 20 2023)
+
+#### 🐛 Bug Fix
+
+- Documentation Page [#591](https://github.com/mumprod/hr-design-system-handlebars/pull/591) ([@Paul-Atreidis](https://github.com/Paul-Atreidis))
+
+#### Authors: 1
+
+- [@Paul-Atreidis](https://github.com/Paul-Atreidis)
+
+---
+
 # v1.10.0 (Mon Mar 20 2023)
 
 #### 🚀 Enhancement

package/dist/assets/index.css

@@ -1056,12 +1056,6 @@ video {
 .bottom-15 {
   bottom: 3.75rem;
 }
-.z-100 {
-  z-index: 100;
-}
-.z-1003 {
-  z-index: 1003;
-}
 .z-10 {
   z-index: 10;
 }
@@ -1080,6 +1074,9 @@ video {
 .-z-1000 {
   z-index: -1000;
 }
+.z-100 {
+  z-index: 100;
+}
 .z-9999 {
   z-index: 9999;
 }
@@ -2667,7 +2664,7 @@ video {
   transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
 .counter-reset {
-  counter-reset: cnt1679312597784;
+  counter-reset: cnt1679391553484;
 }
 .line-clamp-4 {
   overflow: hidden;
@@ -2901,7 +2898,7 @@ video {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1679312597784 1;
+  counter-increment: cnt1679391553484 1;
 }
 .-ordered::before {
   position: absolute;
@@ -2917,7 +2914,7 @@ video {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1679312597784);
+  content: counter(cnt1679391553484);
 }
 /*! ****************************/
 /*! text-shadow                */

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

@@ -7,7 +7,7 @@
 
     <span id="dropdown__label--{{getRandom}}" class="hidden">{{defaultIfEmpty _hiddenNavigationLabel "Unternavigation"}}</span>
     <button 
-         class="content-nav-dropdown_dropdown{{#if this.isDropdown}} -isDropdown{{/if}}{{#if this.isMixed}} -isMixed{{/if}} ds-link-inset relative flex w-full h-10  mb-0 overflow-hidden bg-white border md:mx-0 z-100 border-content-nav whitespace-nowrap text-content-nav fill-content-nav"
+         class="content-nav-dropdown_dropdown{{#if this.isDropdown}} -isDropdown{{/if}}{{#if this.isMixed}} -isMixed{{/if}} ds-link-inset relative flex w-full h-10  mb-0 overflow-hidden bg-white border md:mx-0 z-11 border-content-nav whitespace-nowrap text-content-nav fill-content-nav"
          @click="contentNavDropdownIsOpen = !contentNavDropdownIsOpen;  $dispatch('hr:global:resetinputAutoSuggest');" 
         
          {{#if this.isMixed}}

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

@@ -1,4 +1,4 @@
-<ul class="flex bg-transparent flex-wrap{{#if this.isListOrFlow}} w-full gap-x-2 gap-y-2{{/if}} z-1003 md:!px-0 last:border-b-0{{#if this.isDropdown }} w-full{{/if}}"
+<ul class="flex bg-transparent flex-wrap{{#if this.isListOrFlow}} w-full gap-x-2 gap-y-2{{/if}} md:!px-0 last:border-b-0{{#if this.isDropdown }} w-full{{/if}}"
     > 
     
     {{~#each this.contentNavEntries~}}

package/package.json

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

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

@@ -7,7 +7,7 @@
 
     <span id="dropdown__label--{{getRandom}}" class="hidden">{{defaultIfEmpty _hiddenNavigationLabel "Unternavigation"}}</span>
     <button 
-         class="content-nav-dropdown_dropdown{{#if this.isDropdown}} -isDropdown{{/if}}{{#if this.isMixed}} -isMixed{{/if}} ds-link-inset relative flex w-full h-10  mb-0 overflow-hidden bg-white border md:mx-0 z-100 border-content-nav whitespace-nowrap text-content-nav fill-content-nav"
+         class="content-nav-dropdown_dropdown{{#if this.isDropdown}} -isDropdown{{/if}}{{#if this.isMixed}} -isMixed{{/if}} ds-link-inset relative flex w-full h-10  mb-0 overflow-hidden bg-white border md:mx-0 z-11 border-content-nav whitespace-nowrap text-content-nav fill-content-nav"
          @click="contentNavDropdownIsOpen = !contentNavDropdownIsOpen;  $dispatch('hr:global:resetinputAutoSuggest');" 
         
          {{#if this.isMixed}}

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

@@ -1,4 +1,4 @@
-<ul class="flex bg-transparent flex-wrap{{#if this.isListOrFlow}} w-full gap-x-2 gap-y-2{{/if}} z-1003 md:!px-0 last:border-b-0{{#if this.isDropdown }} w-full{{/if}}"
+<ul class="flex bg-transparent flex-wrap{{#if this.isListOrFlow}} w-full gap-x-2 gap-y-2{{/if}} md:!px-0 last:border-b-0{{#if this.isDropdown }} w-full{{/if}}"
     > 
     
     {{~#each this.contentNavEntries~}}

package/src/stories/views/components/page/page.stories.mdx

@@ -17,9 +17,6 @@ const NavigationDataWithTeaser2 = structuredClone(
 const NavigationDataWithTeaser3 = structuredClone(
     Object.assign({}, NavigationData3, hero_teaser.logicItem.includeModel)
 )
-const NavigationDataWithPlayer = structuredClone(
-    Object.assign({}, NavigationData, audio_player_teaser.logicItem.includeModel, hero_teaser.logicItem.includeModel)
-)
 
 <Meta
     title="Komponenten/Page/Page"
@@ -41,7 +38,90 @@ export const Template = (args, { globals: { customConditionalToolbar } }) => {
     return page({ brand, ...args })
 }
 
-# Page
+# Page (allgemein)
+
+Das Grundgerüst für das HTML-Markup einer Seite (in diesem Fall eine Index-Seite bzw. Übersichtsseite).
+Stand 2023: Inhaltsseiten werden derzeit noch nicht berücksichtigt.
+Für gemischte Inhalte siehe ```Player-Interaktion```
+
+# Grundaufbau
+Um eine Seite zu erzeugen ist ein initiales HTML-Markup notwendig. Der Kopf ```<head>``` ist dabei statisch,
+Inhalte werden im ```<body>```-Tag abgelegt. Der Kopf entspricht einem klassischen HTML-Kopf mit Titel und Metadaten-Angaben.
+
+## Markup im Kopf
+```html
+<!DOCTYPE html>
+<html 
+class="no-js no-js-burgerMenu preload noMicroInteraction"
+data-theme="hessenschau" 
+lang="de"
+>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
+<title>hessenschau.de | Nachrichten aus Hessen</title>
+<meta name="application-name" content="hessenschau.de" />
+<meta name="copyright" content="Hessischer Rundfunk, Frankfurt, Germany" />
+<meta name="author" content="hessenschau.de, Frankfurt, Germany" />
+<meta name="publisher" content="hessenschau.de" />
+<meta name="language" content="Deutsch" />
+</head>
+
+<body itemscope itemtype="http://schema.org/WebPage">
+<div class="js-pageSwap">
+
+MARKUP FÜR INHALTE ...              
+
+<div>    
+</body>
+</html>
+```
+## Markup für Inhalte
+
+Initial wird die Seitennavigation - das Menü - der Seite eingefügt. Wahlweise Abwandlungen der Seitennavigation 
+(mit Subnavigation oder Unwetterwarnung), die über unterschiedlichen Daten-JSONS ausgeformt werden. Die Daten-JSONS hierfür liegen 
+unter ```components/site_header/fixtures``` und die Komponente selber:
+
+```html
+{{> components/site_header/header }}   
+```
+Dann folgen die Inhalte in diesem Fall Teaser, die über das Grid-Layout angeordnet werden. Die Komponenten für die Teaser
+liegen unter ```components/teaser/``` und lauten auf ```teaser_``` und dessen Ausprägung:
+<ul>
+    <li>standard (Standard => Bild oben, Text darunter)</li>
+    <li>alternativ (Alternativ => Bild links, Text rechts)</li>
+    <li>event_calendar (Event-Kalender)</li>
+    <li>poster (Poster => Text auf Bild)</li>
+    <li>indextext (Nur Text)</li>
+    <li>stage (Stage => Sonderform über die ganze Seite)</li>
+</ul>
+
+Auch hier bestimmen die Daten-JSONS, das Bild und den Text. Die Daten-JSONS hierfür liegen 
+unter ```components/teaser/fixtures``` der Aufruf der Komponente selber:
+
+```html
+ {{> components/teaser/teaser_standard }} 
+```
+Gekapselt wird die Teaser-Komponente in einer ```<section>```. Es können beliebig viele Sections mit entsprechenden Teaser-Komponenten
+in das folgende Markup angelegt werden:
+
+ ```html           
+<main onclick="void(0)" role="main" id="content" class="flex items-center justify-center">
+    <div class="grid grid-page">
+        <div class="{{> components/grid/grid_group_wrapper_classes }}">
+            
+            <section class="grid items-start content-start grid-cols-12 col-span-12 bg-white gap-x-6 gap-y-6 ">
+                {{> components/teaser/teaser_standard }}
+            </section>
+             WEITERE TEASER...
+        </div>
+    </div>
+</main>
+
+</div>
+```
+Die Ausformung der Teaser basiert immer auf dem selben Daten-JSON, d.h. Bild und Texte sind immer identisch, lediglich die Größe und der
+Teaser-Typ variieren.
 
 <Canvas withToolbar>
     <Story name="Default" args={NavigationDataWithTeaser}>
@@ -61,10 +141,4 @@ export const Template = (args, { globals: { customConditionalToolbar } }) => {
     </Story>
 </Canvas>
 
-<Canvas>
-    <Story name="Player-Interaktion" args={NavigationDataWithPlayer}>
-        {Template.bind({})}
-    </Story>
-</Canvas>
-
 <ArgsTable story="Default" />

package/src/stories/views/components/page/page_player.stories.mdx

@@ -23,7 +23,16 @@ export const Template = (args, { globals: { customConditionalToolbar } }) => {
 }
 
 
-# Page
+# Page (gemischte Inhalte)
+
+Hier werden nur gemischte Inhalte betrachtet. Hierfür werden Daten-JSONS unterschiedlicher
+Ausprägung (Audio, Podcast) gemischt und herangezogen. Um einer Komponente diese spezifische Inhalte zu übergeben 
+wird sie wie folgt aufgerufen:
+
+```html
+{{> components/teaser/teaser_standard this.teaser_standard_50_audio.logicItem.includeModel}}
+{{> components/teaser/podcast/podcast this.teaser_podcast_50.logicItem.includeModel}}
+```
 
 <Canvas>
     <Story name="Player-Interaktion" args={AudioDataMixed}>