hr-design-system-handlebars 1.26.1 → 1.26.2

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v1.26.2 (Mon Jun 12 2023)
+
+#### 🐛 Bug Fix
+
+- add ticker-timeline [#648](https://github.com/mumprod/hr-design-system-handlebars/pull/648) ([@hanswurstsalat](https://github.com/hanswurstsalat))
+
+#### Authors: 1
+
+- Geraldo ([@hanswurstsalat](https://github.com/hanswurstsalat))
+
+---
+
 # v1.26.1 (Mon Jun 05 2023)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -1027,6 +1027,12 @@ video {
   bottom: 0px;
   left: 0px;
 }
+.-left-4 {
+  left: -1rem;
+}
+.-left-5 {
+  left: -1.25rem;
+}
 .bottom-0 {
   bottom: 0px;
 }
@@ -1063,6 +1069,9 @@ video {
 .top-0 {
   top: 0px;
 }
+.top-0\.5 {
+  top: 0.125rem;
+}
 .top-1\/2 {
   top: 50%;
 }
@@ -1368,6 +1377,9 @@ video {
 .h-8 {
   height: 2rem;
 }
+.h-\[9px\] {
+  height: 9px;
+}
 .h-auto {
   height: auto;
 }
@@ -1392,6 +1404,9 @@ video {
 .max-h-stage {
   max-height: 34.3125rem;
 }
+.w-0 {
+  width: 0px;
+}
 .w-10 {
   width: 2.5rem;
 }
@@ -1455,6 +1470,9 @@ video {
 .w-\[1600px\] {
   width: 1600px;
 }
+.w-\[9px\] {
+  width: 9px;
+}
 .w-auto {
   width: auto;
 }
@@ -2002,6 +2020,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgba(252, 242, 237, var(--tw-bg-opacity));
 }
+.bg-orange-spicyCarrot {
+  --tw-bg-opacity: 1;
+  background-color: rgba(211, 70, 0, var(--tw-bg-opacity));
+}
 .bg-podcast {
   background-color: #006dc1;
   background-color: var(--color-podcast);
@@ -2132,6 +2154,10 @@ video {
   padding-left: 0.375rem;
   padding-right: 0.375rem;
 }
+.px-10 {
+  padding-left: 2.5rem;
+  padding-right: 2.5rem;
+}
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -2732,7 +2758,7 @@ video {
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
 }
 .counter-reset {
-  counter-reset: cnt1685972919792;
+  counter-reset: cnt1686604269121;
 }
 .hyphens-auto {
   -webkit-hyphens: auto;
@@ -2968,7 +2994,7 @@ video {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1685972919792 1;
+  counter-increment: cnt1686604269121 1;
 }
 .-ordered::before {
   position: absolute;
@@ -2984,7 +3010,7 @@ video {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1685972919792);
+  content: counter(cnt1686604269121);
 }
 /*! ****************************/
 /*! text-shadow                */

package/dist/views/components/teaser/ticker/teaser_ticker_timeline.hbs

@@ -0,0 +1,29 @@
+{{~#with this.tickerItemResults ~}}
+    <ul class="px-10">
+        {{~#each this~}}
+            {{#if this.isTopnews}}
+                <li class="relative h-auto pb-5">
+                    <div class="absolute h-full">
+                        <div class="relative w-[9px] h-[9px] rounded-full top-0.5 bg-orange-spicyCarrot -left-5"></div>
+                        {{#unless @last}}
+                            <div class="relative flex flex-col w-0 h-full -left-4">
+                                <div class="h-full my-2 border-l{{#if ../../_color}} border-{{../../_color}}{{else}} border-gray-400{{/if}}"></div>
+                                <div class="h-2"></div>
+                            </div> 
+                        {{/unless}}           
+                    </div>
+                    {{#with this.tickerItemDateTime~}}
+                        <div class="text-xs{{#if ../../../_color}} text-{{../../../_color}}{{/if}}">
+                            {{#if ../../../this.isMultiDay}}
+                                {{this.broadcastDate }}
+                            {{else}}
+                                {{this.time }}
+                            {{/if}}
+                        </div>
+                    {{~/with}}                    
+                    <a class="text-base{{#if ../../_color}} text-{{../../_color}}{{else}} text-toplineColor{{/if}} underline decoration-1 ds-link" href="{{this.tickerItemUrl}}">{{this.relevantTitle}}</a>
+                </li>
+            {{/if}}
+        {{~/each~}}
+    </ul>
+{{~/with~}}

package/package.json

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

package/src/assets/fixtures/teaser/teaser_ticker_timeline.json

@@ -0,0 +1,31 @@
+{
+    "tickerItemResults": [
+        {
+            "isTopnews": true,
+            "tickerItemDateTime": {
+                "broadcastDate": "12. Juni, 10:15",
+                "time": "10:15"
+            },
+            "tickerItemUrl": "Topnews1",
+            "relevantTitle": "Kritik an Privatisierung von Wasser"
+        },
+        {
+            "isTopnews": true,
+            "tickerItemDateTime": {
+                "broadcastDate": "12. Juni, 9:55",
+                "time": "9:55"
+            },
+            "tickerItemUrl": "Topnews2",
+            "relevantTitle": "Suche nach neuem Vorsitz für Hanau-Ausschuss Hanau-Ausschuss Hanau-Ausschuss Hanau-Ausschuss"
+        },
+        {
+            "isTopnews": true,
+            "tickerItemDateTime": {
+                "broadcastDate": "12. Juni, 9:25",
+                "time": "9:25"
+            },
+            "tickerItemUrl": "Topnews3",
+            "relevantTitle": "Pedelec-Fahrer auf B276 lebensgefährlich verletzt"
+        }                
+    ]
+}

package/src/stories/views/components/teaser/fixtures/teaser_ticker_timeline.json

@@ -0,0 +1 @@
+{"tickerItemResults":[{"isTopnews":true,"tickerItemDateTime":{"broadcastDate":"12. Juni, 10:15","time":"10:15"},"tickerItemUrl":"Topnews1","relevantTitle":"Kritik an Privatisierung von Wasser"},{"isTopnews":true,"tickerItemDateTime":{"broadcastDate":"12. Juni, 9:55","time":"9:55"},"tickerItemUrl":"Topnews2","relevantTitle":"Suche nach neuem Vorsitz für Hanau-Ausschuss Hanau-Ausschuss Hanau-Ausschuss Hanau-Ausschuss"},{"isTopnews":true,"tickerItemDateTime":{"broadcastDate":"12. Juni, 9:25","time":"9:25"},"tickerItemUrl":"Topnews3","relevantTitle":"Pedelec-Fahrer auf B276 lebensgefährlich verletzt"}]}

package/src/stories/views/components/teaser/ticker/teaser_ticker_timeline.hbs

@@ -0,0 +1,29 @@
+{{~#with this.tickerItemResults ~}}
+    <ul class="px-10">
+        {{~#each this~}}
+            {{#if this.isTopnews}}
+                <li class="relative h-auto pb-5">
+                    <div class="absolute h-full">
+                        <div class="relative w-[9px] h-[9px] rounded-full top-0.5 bg-orange-spicyCarrot -left-5"></div>
+                        {{#unless @last}}
+                            <div class="relative flex flex-col w-0 h-full -left-4">
+                                <div class="h-full my-2 border-l{{#if ../../_color}} border-{{../../_color}}{{else}} border-gray-400{{/if}}"></div>
+                                <div class="h-2"></div>
+                            </div> 
+                        {{/unless}}           
+                    </div>
+                    {{#with this.tickerItemDateTime~}}
+                        <div class="text-xs{{#if ../../../_color}} text-{{../../../_color}}{{/if}}">
+                            {{#if ../../../this.isMultiDay}}
+                                {{this.broadcastDate }}
+                            {{else}}
+                                {{this.time }}
+                            {{/if}}
+                        </div>
+                    {{~/with}}                    
+                    <a class="text-base{{#if ../../_color}} text-{{../../_color}}{{else}} text-toplineColor{{/if}} underline decoration-1 ds-link" href="{{this.tickerItemUrl}}">{{this.relevantTitle}}</a>
+                </li>
+            {{/if}}
+        {{~/each~}}
+    </ul>
+{{~/with~}}

package/src/stories/views/components/teaser/ticker/teaser_ticker_timeline.mdx

@@ -0,0 +1,30 @@
+import { ArgsTable, Meta, Story, Canvas } from '@storybook/blocks'
+import * as TimelineStories from './teaser_ticker_timeline.stories'
+
+<Meta of={TimelineStories} />
+
+# Ticker-Zeitstrahl
+
+Im Ticker-Zeitstrahl werden die neuesten Topnews chronologisch absteigend angezeigt.
+Dargestellt werden Veröffentlichungszeit und Titel. Der Titel ist verlinkt auf den entsprechenden Ticker-Eintrag.
+
+
+## Varianten
+
+Aktuell sind 2 Varianten vorgesehen. Eine zur Darstellung im Teaser (weiße Schrift auf blauem Hintergrund) und eine weitere
+für die Darstellung im Ticker selbst (schwarz/Linkfarbe auf weiß)
+
+<Canvas>
+    <Story of={TimelineStories.TimelineWhite} />
+    <Story of={TimelineStories.TimelineBlack} />
+</Canvas>
+
+
+## Verwendung
+
+Die Komponente wird wie folgt eingebunden:
+
+```handlebars
+{{> components/teaser/ticker/teaser_ticker_timeline _color="white"}}
+```
+Der _color-Parameter ist optional. Ohne _color-Parameter wird der Zeitstrahl in schwarz/Linkfarbe dargestellt.

package/src/stories/views/components/teaser/ticker/teaser_ticker_timeline.stories.js

@@ -0,0 +1,44 @@
+import timelineJson from '../fixtures/teaser_ticker_timeline.json'
+
+const handlebars = require('hrHandlebars')
+
+const timelineOnBlue = (args) => {
+    let hbsTemplate = handlebars.compile(`
+    <div class="bg-blue-congress pt-5">
+        {{> components/teaser/ticker/teaser_ticker_timeline _color="white"}}
+    </div>
+  `)
+    return hbsTemplate({ ...args })
+}
+
+const timelineOnWhite = (args) => {
+    let hbsTemplate = handlebars.compile(`
+    <div class="pt-5">
+        {{> components/teaser/ticker/teaser_ticker_timeline }}
+    </div>
+  `)
+    return hbsTemplate({ ...args })
+}
+
+export default {
+    title: 'Komponenten/Teaser/Ticker/Komponenten',
+
+    argTypes: {
+        '_color': {
+            description: 'Text- und Linienfarbe',
+            control: false,
+        },
+    }
+}
+
+export const TimelineWhite = {
+    render: timelineOnBlue.bind({}),
+    name: 'Zeitstrahl auf blau',
+    args: timelineJson,
+}
+
+export const TimelineBlack = {
+    render: timelineOnWhite.bind({}),
+    name: 'Zeitstrahl auf weiß',
+    args: timelineJson,
+}