hr-design-system-handlebars 1.27.0 → 1.27.2

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

@@ -0,0 +1,69 @@
+import ticker from './teaser_ticker_standard.hbs'
+import tickerTeaserHeroStandard from '../fixtures/ticker_teaser_standard_hero.json'
+import tickerTeaserHeroStandardAudio from '../fixtures/ticker_teaser_standard_hero_audio.json'
+import tickerTeaser100Standard from '../fixtures/ticker_teaser_standard_100.json'
+import tickerTeaser50Standard from '../fixtures/ticker_teaser_standard_50.json'
+import tickerTeaser33Standard from '../fixtures/ticker_teaser_standard_33.json'
+import tickerTeaser25Standard from '../fixtures/ticker_teaser_standard_25.json'
+
+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 ticker({ brand, ...args })
+}
+
+export default {
+    title: 'Komponenten/Teaser/Ticker/Standard',
+
+    parameters: {
+        layout: '',
+    },
+
+    argTypes: {},
+
+    decorators: [
+        (Story) => {
+            return `<div class="grid grid-page"><div class="grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-9.5 sm:col-main">  
+             ${Story()} 
+             </div></div>`
+        },
+    ],
+}
+
+export const TickerTeaserHero = {
+    render: Template.bind({}),
+    name: 'Standard Hero',
+    args: tickerTeaserHeroStandard.logicItem.includeModel,
+}
+
+export const TickerTeaserHeroAudio = {
+    render: Template.bind({}),
+    name: 'Standard Hero Media',
+    args: tickerTeaserHeroStandardAudio.logicItem.includeModel,
+}
+
+export const TickerTeaser100 = {
+    render: Template.bind({}),
+    name: 'Standard 100',
+    args: tickerTeaser100Standard.logicItem.includeModel,
+}
+
+export const TickerTeaser50 = {
+    render: Template.bind({}),
+    name: 'Standard 50',
+    args: tickerTeaser50Standard.logicItem.includeModel,
+}
+
+export const TickerTeaser33 = {
+    render: Template.bind({}),
+    name: 'Standard 33',
+    args: tickerTeaser33Standard.logicItem.includeModel,
+}
+
+export const TickerTeaser25 = {
+    render: Template.bind({}),
+    name: 'Standard 25',
+    args: tickerTeaser25Standard.logicItem.includeModel,
+}

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

@@ -1,10 +1,10 @@
 {{~#with this.tickerItemResults ~}}
-    <ul class="px-10">
+    <ul class="{{#if ../_css}} {{../_css}}{{/if}} {{if ../this.isStandardTeaser ' pl-10 pr-5' ' pl-10 md:pl-5 pr-5 md:pr-0'}}">
         {{~#each this~}}
             {{#if this.isTopnews}}
-                <li class="relative h-auto pb-5">
+                <li class="relative h-auto [&:not(:last-child)]: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>
+                        <div class="relative w-[9px] h-[9px] rounded-full top-0.5 bg-tickerTeaserTimelineScore -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>

package/src/stories/views/components/tracking/navigation_tracking.hbs

@@ -1 +1,4 @@
-data-hr-click-tracking='{"settings": [{"type":"uxAction","secondLevelId": "1","clickLabel":"{{_clickLabelType}}{{#if _clickLabelPrefix1}}::{{_clickLabelPrefix1}}{{/if}}{{#if _clickLabelPrefix2}}::{{_clickLabelPrefix2}}{{/if}}-Link geklickt"}]}'
+data-hr-click-tracking='{"settings": [{"type":"uxNavigation","secondLevelId": "1","clickLabel":"{{_clickLabelType}}{{#if
+    _clickLabelPrefix1
+}}::{{_clickLabelPrefix1}}{{/if}}{{#if _clickLabelPrefix2}}::{{_clickLabelPrefix2}}{{/if}}-Link
+geklickt"}]}'

package/tailwind.config.js

@@ -322,6 +322,7 @@ module.exports = {
                 'secondary': 'var(--color-secondary-ds)',
                 'highlight-1': 'var(--color-highlight-1)',
                 'highlight-2': 'var(--color-highlight-2)',
+                'highlight-3': 'var(--color-highlight-3)',
                 'top-topic-background': 'var(--color-top-topic-background)',
                 'labelMedia': 'var(--color-label-media)',
                 'labelEvent': 'var(--color-label-event)',
@@ -358,6 +359,10 @@ module.exports = {
                 'event-calendar-primary': 'var(--color-eventcalendar-primary)',
                 'event-calendar-secondary': 'var(--color-eventcalendar-secondary)',
                 'byline': 'var(--color-byline)',
+                'tickerTeaserHeadline': 'var(--color-ticker-teaser-headline,#000)',
+                'tickerTeaserlabelByline': 'var(--color-ticker-teaser-label-byline)',
+                'tickerTeaserTimelineScore': 'var(--color-ticker-teaser-timeline-score)',
+                'tickerTeaserFooter': 'var(--color-ticker-teaser-footer)'
             },
         },
     },

package/dist/views/components/teaser/components/teaser_ticker_body.hbs

@@ -1,39 +0,0 @@
-<div class="{{#if _outerCssClasses}} {{_outerCssClasses}}{{/if}}" 
-{{~#if this.isMobile1to1}}:class="{'basis-full w-full md:pr-0 pr-10':avStart,'basis-3/5 w-3/5':!avStart}"{{/if}}>
-
-    
-    {{#> components/teaser/components/teaser_header _css=(if this.isMobile1to1 "" "px-5 sm:px-0 mx-4 mb-5")}}
-        {{#>components/base/link _link=this.link _css="cy-teaser-link ds-teaser-focus hover:text-toplineColor" }} 
-            {{#with this.label}}
-                {{#> components/label/label_group}}
-                    {{> components/label/label _type=this.type _text=(loca this.loca)}}
-                    {{> components/label/label_byline _css="ml-2"}}
-                {{/components/label/label_group}}
-            {{/with~}}
-            {{#> components/teaser/components/teaser_headline _headlineTag=this.headlineTag _css="overflow-anywhere hyphens-auto"}}
-                {{#if this.topline}}
-                    {{> components/teaser/components/teaser_topline _css="" _text=this.topline}}
-                {{/if}}
-                {{> components/teaser/components/teaser_title _css="!text-white" _text=this.title _size=this.realTeaserSize _teaserType=this.teaserType _isMobile1to1=this.isMobile1to1}}
-                {{#if this.extendedTitle}}
-                    {{> components/teaser/components/teaser_subline _text=this.extendedTitle}}
-                {{/if}}
-            {{/components/teaser/components/teaser_headline}}
-        {{/components/base/link}} 
-    {{/components/teaser/components/teaser_header}}
-
-    <div class="flex flex-wrap justify-between mx-4 my-5 text-base text-white justify-items-center">
-        {{#if this.hasByline}}
-            <p class="self-center text-xs text-white font-headingSerif empty:hidden overflow-anywhere hyphens-auto">
-                {{~#if this.profiles~}}
-                    <span>{{this.profiles}}</span>
-                {{~/if~}}
-            </p>
-        {{/if}}
-        <a class="underline ds-link" href="{{this.url}}">Zum Ticker</a>
-    </div>
-
-
-
-
-</div>

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

@@ -1,29 +0,0 @@
-<article class="bg-blue-congress rounded-tl-hr rounded-br-hr items-start relative col-span-12 flex {{if this.displayTeaserBodyAsImageOverlay '' 'gap-y-3'}} gap-x-4 
-{{~inline-switch this.teaserSize '["25","33","50"]' '[" md:col-span-3"," md:col-span-4"," md:col-span-6",""]'}}
-{{~#if this.isMobile1to1}} js-is1to1 px-5 sm:px-0 md:flex-col{{else}} flex-col{{/if~}} 
- "
-    x-data="{ avStart: false }"
-    {{#if this.isMobile1to1}}
-            :class="avStart ? 'flex-col' : 'flex-row'"
-    {{/if}}   
-    >
-    {{#if this.teaserImage}}
-        <figure class="{{> components/teaser/utilities/teaser_image_cypress_hook_classes}}relative
-        {{~#if this.isMobile1to1}} basis-2/5 w-2/5 ar-1-1 md:basis-full md:w-full md:ar-16-9{{else}} ar-16-9 w-full{{/if~}}"
-        {{~#if this.isMobile1to1}} :class="{'ar-16-9 w-full basis-full': avStart,'ar-1-1 basis-2/5 w-2/5':!avStart}"{{/if}} >    
-            {{> components/teaser/components/teaser_lead _addClassImg="rounded-tl-hr" _isMobile1to1=this.isMobile1to1 _teaserSize=this.teaserSize _teaserType=this.teaserType _aspectRatio=(if this.isMobile1to1 'ar-1-1 md:ar-16-9' (inline-switch this.teaserSize '["25"]' '["ar-1-1 md:ar-16-9", "ar-16-9"]')) }}     
-        </figure>
-        {{#if this.displayTeaserBodyAsImageOverlay}}
-            {{#decorator 'components/teaser/components/teaser_image_overlay' _noOverlayInMobileViewports=true _cssClasses=" relative md:absolute w-full bottom-0"}}
-                <div class="flex flex-col items-center justify-center p-4 border-r border-gray-400 border-dashed basis-1/12">
-                    {{> components/event/instant_dates}}
-                </div>
-                {{> components/teaser/components/teaser_ticker_body _outerCssClasses=(if this.isMobile1to1 'basis-11/12 py-4 sm:px-4 basis-3/5 w-3/5 md:basis-full md:w-full' 'basis-11/12 py-4 sm:px-4')}}
-            {{/decorator}}
-        {{else}}
-            {{> components/teaser/components/teaser_ticker_body _outerCssClasses=(if this.isMobile1to1 'basis-3/5 w-3/5 md:basis-full md:w-full')}}
-        {{/if}}
-    {{else}}
-        {{> components/teaser/components/teaser_ticker_body _outerCssClasses="basis-full"}}
-    {{/if}}
-</article>

package/src/stories/views/components/teaser/components/teaser_ticker_body.hbs

@@ -1,39 +0,0 @@
-<div class="{{#if _outerCssClasses}} {{_outerCssClasses}}{{/if}}" 
-{{~#if this.isMobile1to1}}:class="{'basis-full w-full md:pr-0 pr-10':avStart,'basis-3/5 w-3/5':!avStart}"{{/if}}>
-
-    
-    {{#> components/teaser/components/teaser_header _css=(if this.isMobile1to1 "" "px-5 sm:px-0 mx-4 mb-5")}}
-        {{#>components/base/link _link=this.link _css="cy-teaser-link ds-teaser-focus hover:text-toplineColor" }} 
-            {{#with this.label}}
-                {{#> components/label/label_group}}
-                    {{> components/label/label _type=this.type _text=(loca this.loca)}}
-                    {{> components/label/label_byline _css="ml-2"}}
-                {{/components/label/label_group}}
-            {{/with~}}
-            {{#> components/teaser/components/teaser_headline _headlineTag=this.headlineTag _css="overflow-anywhere hyphens-auto"}}
-                {{#if this.topline}}
-                    {{> components/teaser/components/teaser_topline _css="" _text=this.topline}}
-                {{/if}}
-                {{> components/teaser/components/teaser_title _css="!text-white" _text=this.title _size=this.realTeaserSize _teaserType=this.teaserType _isMobile1to1=this.isMobile1to1}}
-                {{#if this.extendedTitle}}
-                    {{> components/teaser/components/teaser_subline _text=this.extendedTitle}}
-                {{/if}}
-            {{/components/teaser/components/teaser_headline}}
-        {{/components/base/link}} 
-    {{/components/teaser/components/teaser_header}}
-
-    <div class="flex flex-wrap justify-between mx-4 my-5 text-base text-white justify-items-center">
-        {{#if this.hasByline}}
-            <p class="self-center text-xs text-white font-headingSerif empty:hidden overflow-anywhere hyphens-auto">
-                {{~#if this.profiles~}}
-                    <span>{{this.profiles}}</span>
-                {{~/if~}}
-            </p>
-        {{/if}}
-        <a class="underline ds-link" href="{{this.url}}">Zum Ticker</a>
-    </div>
-
-
-
-
-</div>

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

@@ -1,29 +0,0 @@
-<article class="bg-blue-congress rounded-tl-hr rounded-br-hr items-start relative col-span-12 flex {{if this.displayTeaserBodyAsImageOverlay '' 'gap-y-3'}} gap-x-4 
-{{~inline-switch this.teaserSize '["25","33","50"]' '[" md:col-span-3"," md:col-span-4"," md:col-span-6",""]'}}
-{{~#if this.isMobile1to1}} js-is1to1 px-5 sm:px-0 md:flex-col{{else}} flex-col{{/if~}} 
- "
-    x-data="{ avStart: false }"
-    {{#if this.isMobile1to1}}
-            :class="avStart ? 'flex-col' : 'flex-row'"
-    {{/if}}   
-    >
-    {{#if this.teaserImage}}
-        <figure class="{{> components/teaser/utilities/teaser_image_cypress_hook_classes}}relative
-        {{~#if this.isMobile1to1}} basis-2/5 w-2/5 ar-1-1 md:basis-full md:w-full md:ar-16-9{{else}} ar-16-9 w-full{{/if~}}"
-        {{~#if this.isMobile1to1}} :class="{'ar-16-9 w-full basis-full': avStart,'ar-1-1 basis-2/5 w-2/5':!avStart}"{{/if}} >    
-            {{> components/teaser/components/teaser_lead _addClassImg="rounded-tl-hr" _isMobile1to1=this.isMobile1to1 _teaserSize=this.teaserSize _teaserType=this.teaserType _aspectRatio=(if this.isMobile1to1 'ar-1-1 md:ar-16-9' (inline-switch this.teaserSize '["25"]' '["ar-1-1 md:ar-16-9", "ar-16-9"]')) }}     
-        </figure>
-        {{#if this.displayTeaserBodyAsImageOverlay}}
-            {{#decorator 'components/teaser/components/teaser_image_overlay' _noOverlayInMobileViewports=true _cssClasses=" relative md:absolute w-full bottom-0"}}
-                <div class="flex flex-col items-center justify-center p-4 border-r border-gray-400 border-dashed basis-1/12">
-                    {{> components/event/instant_dates}}
-                </div>
-                {{> components/teaser/components/teaser_ticker_body _outerCssClasses=(if this.isMobile1to1 'basis-11/12 py-4 sm:px-4 basis-3/5 w-3/5 md:basis-full md:w-full' 'basis-11/12 py-4 sm:px-4')}}
-            {{/decorator}}
-        {{else}}
-            {{> components/teaser/components/teaser_ticker_body _outerCssClasses=(if this.isMobile1to1 'basis-3/5 w-3/5 md:basis-full md:w-full')}}
-        {{/if}}
-    {{else}}
-        {{> components/teaser/components/teaser_ticker_body _outerCssClasses="basis-full"}}
-    {{/if}}
-</article>

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

@@ -1,10 +0,0 @@
-import { ArgsTable, Meta, Story, Canvas } from '@storybook/blocks'
-import * as TeaserTickerStories from './teaser_ticker.stories'
-
-import ticker from './teaser_ticker.hbs'
-
-<Meta of={TeaserTickerStories} />
-
-<Canvas withToolbar>
-    <Story of={TeaserTickerStories.TickerTeaser100} />
-</Canvas>

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

@@ -1,34 +0,0 @@
-import ticker from './teaser_ticker.hbs'
-import tickerTeaser100Standard from '../fixtures/ticker_teaser_standard_100.json'
-
-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 ticker({ brand, ...args })
-}
-
-export default {
-    title: 'Komponenten/Teaser/Ticker',
-
-    parameters: {
-        layout: '',
-    },
-
-    argTypes: {},
-
-    decorators: [
-        (Story) => {
-            return `<div class="grid grid-page"><div class="grid grid-cols-12 py-6 col-full gap-x-6 gap-y-6 sm:px-9.5 sm:col-main">  
-             ${Story()} 
-             </div></div>`
-        },
-    ],
-}
-
-export const TickerTeaser100 = {
-    render: Template.bind({}),
-    name: 'Standard 100',
-    args: tickerTeaser100Standard.logicItem.includeModel,
-}