hr-design-system-handlebars 1.13.0 → 1.14.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v1.14.0 (Fri Apr 28 2023)
+
+#### 🚀 Enhancement
+
+- Dpe 2244 stories & doku [#616](https://github.com/mumprod/hr-design-system-handlebars/pull/616) ([@StefanVesper](https://github.com/StefanVesper))
+
+#### Authors: 1
+
+- SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
+
+---
+
 # v1.13.0 (Tue Apr 25 2023)
 
 #### 🚀 Enhancement

package/dist/assets/index.css

@@ -1174,6 +1174,9 @@ video {
 .mb-0 {
   margin-bottom: 0px;
 }
+.mb-10 {
+  margin-bottom: 2.5rem;
+}
 .mb-4 {
   margin-bottom: 1rem;
 }
@@ -1417,6 +1420,9 @@ video {
 .w-9 {
   width: 2.25rem;
 }
+.w-\[1600px\] {
+  width: 1600px;
+}
 .w-auto {
   width: auto;
 }
@@ -2671,7 +2677,7 @@ video {
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
 }
 .counter-reset {
-  counter-reset: cnt1682432562679;
+  counter-reset: cnt1682683106873;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -2909,7 +2915,7 @@ video {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1682432562679 1;
+  counter-increment: cnt1682683106873 1;
 }
 .-ordered::before {
   position: absolute;
@@ -2925,7 +2931,7 @@ video {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1682432562679);
+  content: counter(cnt1682683106873);
 }
 /*! ****************************/
 /*! text-shadow                */

package/dist/assets/vendor/js/header.alpine.js

@@ -31,7 +31,7 @@ document.addEventListener('alpine:init', () => {
                 }, wait)
             }
         },
-        init() {
+        start() {
             let lastScrollTop = 0
             let height = window.innerHeight
 

package/dist/views/components/horizontal_scroll_container/horizontal_scroll_container_example.hbs

@@ -0,0 +1,9 @@
+<div class="w-full h-auto mb-10">
+{{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="xs" _onDarkBackground="true"}}
+    
+    <div class="flex h-auto p-4 pr-10 text-lg leading-6 text-white w-[1600px] bg-blue-congress">
+        <p class="whitespace-nowrap ">Guten Tag. Dieses Div kann mittels click auf die Pfeiltasten verschoben werden kann. Die Pfeile werden dynamisch angezeigt/ausgeblendet sobald der Rand des Inhalts erreicht ist.  </p>
+    </div> 
+
+{{/components/horizontal_scroll_container/horizontal_scroll_container}}
+</div>

package/dist/views/components/site_header/header.hbs

@@ -1,10 +1,10 @@
-<div class="sb-main-navigation" x-data="mainNavigationHandler()" x-init="init()">
+<div class="sb-main-navigation" x-data="mainNavigationHandler()" x-init="{{#unless (isStorybook) }} start() {{/unless}} ">
     <header class="print:hidden relative z-10001 {{#if this.hasOpenSubNavigation}}lg:h-header-lg-big{{else}}lg:h-header-lg-small{{/if}} md:h-header-md h-header-sm">   
         <div x-data 
             id="headerWrapper"
             @resize.window="resetNav()" 
             :class="shouldBrandNavBeHidden() ? '-mt-10 lg:-mt-8' : ''  "
-            class="fixed top-0 left-0 flex flex-wrap max-w-full transition-all duration-500 transform font-copy lg:justify-center lg:w-full ">
+            class="{{#unless (isStorybook) }} fixed top-0 left-0{{/unless}} flex flex-wrap max-w-full transition-all duration-500 transform font-copy lg:justify-center lg:w-full ">
             
             <div id="anchorNavWrapper" 
                 class="hidden">

package/package.json

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

package/src/assets/vendor/js/header.alpine.js

@@ -31,7 +31,7 @@ document.addEventListener('alpine:init', () => {
                 }, wait)
             }
         },
-        init() {
+        start() {
             let lastScrollTop = 0
             let height = window.innerHeight
 

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

@@ -0,0 +1,30 @@
+import { Meta, Story, Canvas, Preview } from '@storybook/blocks'
+import * as ScrollContainerStories from './horizontal_scroll_container.stories'
+
+<Meta of={ScrollContainerStories} />
+
+# Horizontal Scroll Container
+
+<Canvas>
+     <Story of={ScrollContainerStories.Example} />
+</Canvas>
+
+
+## Beschreibung
+
+Diese Komponente stellt einen Inhalts-Slider dar, dessen Inhalt via Pfeiltasten horizontal scrollbar wird, sobald er die Breite des Containers übersteigt. 
+Die Komponente wird als Decorator benutzt, d.h. der zu scrollende Inhalt wird innerhalb des Templates via <b>@partial-block</b> ausgegeben. <br /><br />
+Der Übergabeparameter "<b>_viewport</b>" ist ein String und legt die Viewportgröße fest, ab der die Komponente aktiv wird ('xs','sm','md','lg'). <br />
+Der Übergabeparameter "<b>_onDarkBackground</b>" ist ein boolscher Wert mit dem die Farben der Pfeiltasten gesteuert werden können.<br /> 
+
+<br />
+
+Die Komponente wird in handlebars wie folgt eingebaut:
+
+```html
+{{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="xs" _onDarkBackground="true"}}
+     Zu scrollender Inhalt / Komponente / etc
+{{/components/horizontal_scroll_container/horizontal_scroll_container}}
+```
+
+Derzeit wird diese Komponente auf hessenschau.de in der Brand-Navigation und der Section-Navigation eingesetzt. 

package/src/stories/views/components/horizontal_scroll_container/horizontal_scroll_container.stories.js

@@ -0,0 +1,33 @@
+import horizontal_scroll_container from './horizontal_scroll_container_example.hbs'
+
+const Template = (args, { globals: { customConditionalToolbar } }) => {
+    // You can either use a function to create DOM elements or use a plain html string!
+    // return `<div>${label}</div>`;
+    let brand =
+        undefined !== customConditionalToolbar ? customConditionalToolbar['brands'] : 'hessenschau'
+    return horizontal_scroll_container({ brand, ...args })
+}
+
+export default {
+    title: 'Komponenten/Utilities/Horizontal Scroll Container',
+    argTypes: {},
+
+    parameters: {
+        chromatic: {
+            viewports: [360, 768, 1024],
+        },
+
+        layout: 'fullscreen',
+
+        docs: {
+            inlineStories: true,
+            iframeHeight: 400,
+        },
+    },
+}
+
+export const Example = {
+    render: Template.bind({}),
+    name: 'Example',
+    args: null,
+}

package/src/stories/views/components/horizontal_scroll_container/horizontal_scroll_container_example.hbs

@@ -0,0 +1,9 @@
+<div class="w-full h-auto mb-10">
+{{#> components/horizontal_scroll_container/horizontal_scroll_container _viewport="xs" _onDarkBackground="true"}}
+    
+    <div class="flex h-auto p-4 pr-10 text-lg leading-6 text-white w-[1600px] bg-blue-congress">
+        <p class="whitespace-nowrap ">Guten Tag. Dieses Div kann mittels click auf die Pfeiltasten verschoben werden kann. Die Pfeile werden dynamisch angezeigt/ausgeblendet sobald der Rand des Inhalts erreicht ist.  </p>
+    </div> 
+
+{{/components/horizontal_scroll_container/horizontal_scroll_container}}
+</div>

package/src/stories/views/components/page/page.data.js

@@ -2,8 +2,10 @@ import structuredClone from 'core-js-pure/actual/structured-clone'
 import NavigationData from '../site_header/fixtures/site_header_default.json'
 import NavigationData2 from '../site_header/fixtures/site_header_mit_warnung.json'
 import NavigationData3 from '../site_header/fixtures/site_header_mit_submenu.json'
+import NavigationData4 from '../site_header/fixtures/site_header_mit_top_topics.json'
 
 import hero_teaser from '../teaser/fixtures/teaser_standard_hero_serif.json'
+
 const NavigationDataWithTeaser = structuredClone(
     Object.assign({}, NavigationData, hero_teaser.logicItem.includeModel)
 )
@@ -13,5 +15,7 @@ const NavigationDataWithTeaser2 = structuredClone(
 const NavigationDataWithTeaser3 = structuredClone(
     Object.assign({}, NavigationData3, hero_teaser.logicItem.includeModel)
 )
-
-export { NavigationDataWithTeaser, NavigationDataWithTeaser2, NavigationDataWithTeaser3 }
+const NavigationDataWithTeaser4 = structuredClone(
+    Object.assign({}, NavigationData4, hero_teaser.logicItem.includeModel)
+)
+export { NavigationDataWithTeaser, NavigationDataWithTeaser2, NavigationDataWithTeaser3, NavigationDataWithTeaser4 }

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

@@ -3,6 +3,8 @@ import {
     NavigationDataWithTeaser,
     NavigationDataWithTeaser2,
     NavigationDataWithTeaser3,
+    NavigationDataWithTeaser4
+
 } from './page.data.js'
 
 const Template = (args, { globals: { customConditionalToolbar } }) => {
@@ -48,3 +50,9 @@ export const MitSubnavigation = {
     name: 'Mit Subnavigation',
     args: NavigationDataWithTeaser3,
 }
+
+export const MitTopTopics = {
+    render: Template.bind({}),
+    name: 'Mit Top-Topics',
+    args: NavigationDataWithTeaser4,
+}

package/src/stories/views/components/site_header/header.hbs

@@ -1,10 +1,10 @@
-<div class="sb-main-navigation" x-data="mainNavigationHandler()" x-init="init()">
+<div class="sb-main-navigation" x-data="mainNavigationHandler()" x-init="{{#unless (isStorybook) }} start() {{/unless}} ">
     <header class="print:hidden relative z-10001 {{#if this.hasOpenSubNavigation}}lg:h-header-lg-big{{else}}lg:h-header-lg-small{{/if}} md:h-header-md h-header-sm">   
         <div x-data 
             id="headerWrapper"
             @resize.window="resetNav()" 
             :class="shouldBrandNavBeHidden() ? '-mt-10 lg:-mt-8' : ''  "
-            class="fixed top-0 left-0 flex flex-wrap max-w-full transition-all duration-500 transform font-copy lg:justify-center lg:w-full ">
+            class="{{#unless (isStorybook) }} fixed top-0 left-0{{/unless}} flex flex-wrap max-w-full transition-all duration-500 transform font-copy lg:justify-center lg:w-full ">
             
             <div id="anchorNavWrapper" 
                 class="hidden">

package/src/stories/views/components/site_header/header.mdx

@@ -8,7 +8,7 @@ import * as HeaderStories from './header.stories'
 [Frameworks](#frameworks) - [Varianten](#varianten) - [Scrollverhalten](#scrollverhalten) - [Templates & Codes](#templates) - [Sub-Komponenten](#subkomponenten)
 
 <Canvas>
-    <Story of={HeaderStories.Default} />
+     <Story of={HeaderStories.Default} />
 </Canvas>
 
 ## Beschreibung
@@ -80,10 +80,6 @@ Mobil:
 
 <br />
 
-<br />
-
-<br />
-
 Navigation mit zusätzlichem Service-Item:{' '}
 
 <Canvas>
@@ -94,12 +90,6 @@ Navigation mit zusätzlichem Service-Item:{' '}
 
 <br />
 
-<br />
-
-<br />
-
-<br />
-
 Navigation mit zusätzlicher Subnavigation:{' '}
 
 <Canvas>
@@ -110,12 +100,6 @@ Navigation mit zusätzlicher Subnavigation:{' '}
 
 <br />
 
-<br />
-
-<br />
-
-<br />
-
 Navigation mit Top Topics:{' '}
 
 <Canvas>
@@ -419,13 +403,14 @@ Service-Navigation Flyout Tablet/Mobil:
 
 -   section_navigation_item.hbs
 -   navigation_flyout.hbs
+-   horizontal_scroll_container.hbs
 
 <br />
 
 Die Section-Navigation stellt die Links zu den einzelnen Themenbereichen der Hessenschau bereit. Die
 Navigation-Items der Section Navigation können je nach Einstellung vom CMS direkt zur Themen-Indexseite
 verlinken oder ihrerseits ein Flyout öffnen, über dessen Einträge dann Themenbereiche angesteuert werden
-können:
+können. Wird die Gesamtbreite der Section-Navigation breiter als der Container des Headers, werden am Rand Pfeile zum Verschieben der Navigation angezeigt. 
 
 <br />