hr-design-system-handlebars 1.114.98 → 1.114.100

package/CHANGELOG.md

@@ -1,3 +1,28 @@
+# v1.114.100 (Wed Feb 19 2025)
+
+#### 🐛 Bug Fix
+
+- Enhance publication date handling and add ticker component [#1247](https://github.com/mumprod/hr-design-system-handlebars/pull/1247) ([@vascoeduardo](https://github.com/vascoeduardo) [@eduardo-hr](https://github.com/eduardo-hr))
+
+#### Authors: 2
+
+- [@eduardo-hr](https://github.com/eduardo-hr)
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
+# v1.114.99 (Wed Feb 19 2025)
+
+#### 🐛 Bug Fix
+
+- move sticky player script to main alpine.js script and load it async [#1246](https://github.com/mumprod/hr-design-system-handlebars/pull/1246) ([@StefanVesper](https://github.com/StefanVesper))
+
+#### Authors: 1
+
+- SonicSoulSurfer ([@StefanVesper](https://github.com/StefanVesper))
+
+---
+
 # v1.114.98 (Wed Feb 19 2025)
 
 #### ⚠️ Pushed to `main`

package/dist/assets/index.css

@@ -3846,7 +3846,7 @@ article #commentList {
   border-bottom-color: var(--color-secondary-ds);
 }
 .counter-reset {
-  counter-reset: cnt1739964042450;
+  counter-reset: cnt1739969968897;
 }
 .animate-delay-100 {
   --tw-animate-delay: 100ms;
@@ -4088,7 +4088,7 @@ html { scroll-behavior: smooth; }
             minmax(var(--mobile-padding), var(--desktop-padding)) [full-width-end];
         grid-column: main;
     }
-.grid-article > :not(.article-breakout):not(.article-full-width):not(.sticky) {
+.grid-article > :not(.article-breakout):not(.article-full-width):not(.article-narrow):not(.sticky) {
         grid-column: narrow;
     }
 .article-full-width {
@@ -4291,7 +4291,7 @@ html { scroll-behavior: smooth; }
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1739964042450 1;
+  counter-increment: cnt1739969968897 1;
 }
 .-ordered::before {
   position: absolute;
@@ -4309,7 +4309,7 @@ html { scroll-behavior: smooth; }
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, 1);
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1739964042450);
+  content: counter(cnt1739969968897);
 }
 /*! ****************************/
 /*! DataPolicy stuff           */
@@ -8235,6 +8235,10 @@ ul.restrictedToTwo li:nth-of-type(1n + 2) .timelineBorder {
     margin-bottom: 0.125rem;
   }
 
+  .lg\:mb-13 {
+    margin-bottom: 3.25rem;
+  }
+
   .lg\:ml-0 {
     margin-left: 0px;
   }
@@ -8665,6 +8669,9 @@ ul.restrictedToTwo li:nth-of-type(1n + 2) .timelineBorder {
                 minmax(0, 1fr) [full-end];
         }
     }
+    .lg\:article-breakout {
+        grid-column: content;
+    }
 
     .lg\:col-main {
         grid-column: main;

package/dist/assets/js/alpine.js

@@ -10,14 +10,13 @@ import mainNavigationHandler from 'components/site_header/mainNavigationHandler.
 import flyoutHandler from 'components/site_header/flyoutHandler.alpine'
 import overlayHandler from 'components/site_header/overlayHandler.alpine'
 import dropdown from 'components/site_header/dropdown.alpine'
- 
 
 AsyncAlpine.init(Alpine)
     .data('podcastPlayer', () => import('components/podcast/podcast_player.alpine.js'))
     .data('slider', () =>
         import('components/horizontal_scroll_container/horizontal_scroll_container.alpine.js')
     )
-    
+    .data('stickyPlayer', () => import('components/mediaplayer/stickyPlayer.alpine.js'))
     .data('socialSharingHandler', ()=> import('components/social_sharing/socialSharingHandler.alpine.js'))
     .data('inputHandler', ()=> import('components/forms/js/inputHandler.alpine.js'))
     .data('contactForm', ()=> import('components/forms/js/contactForm.alpine.js'))

package/dist/assets/js/components/mediaplayer/stickyPlayer.alpine.js

@@ -0,0 +1,71 @@
+export default function stickyPlayer() {
+    return {    
+        eventListenerInitialized: false,
+        inViewport: true, 
+        videoStarted: false,
+        videoStoped: true,
+        videoPlaying: false,
+        videoWasStopedWhenSticky: false,
+        videoWasClosedByUser: false,
+        videoElement: null,
+
+        shouldVideoBeFixed: function () {
+            return (!this.inViewport && this.videoPlaying) || (!this.inViewport && this.videoWasStopedWhenSticky) 
+        },
+        setupVideoEventListeners: function () {
+            console.log("setupVideoEventListeners");
+            if(!this.eventListenerInitialized) {                          
+                this.videoElement.addEventListener("play", () => {
+                    console.log("video:play");
+                    this.videoStarted = true;
+                    this.videoPlaying = true;
+                    this.videoStoped = false;
+                });
+                this.videoElement.addEventListener("pause", () => {
+                    console.log("video:pause");
+                    this.videoPlaying = false;
+                    this.videoStoped = true;
+                    if (!this.inViewport ) {
+                        if(this.videoWasClosedByUser){
+                            this.videoWasClosedByUser = false
+                        } else {
+                            this.videoWasStopedWhenSticky = true;
+                        }                               
+                    }
+                });
+                this.eventListenerInitialized = true;
+            }
+        },
+        closeVideo: function () {
+            this.videoWasStopedWhenSticky = false;
+            this.videoWasClosedByUser = true;
+            this.videoElement.pause();                 
+        },
+        init: function () {
+            this.videoElement = this.$refs.videoElementWrapper.querySelector("video");
+            if(this.videoElement) {
+                this.setupVideoEventListeners();
+            } else {
+                console.log("No video element found in sticky player.");
+                const self = this; // Save a reference to the Alpine instance
+                const observer = new MutationObserver(function() {
+                    console.log("MutationObserver: Mutation observed in sticky player.");
+                    
+                    // Re-check for the video element
+                    self.videoElement = self.$refs.videoElementWrapper.querySelector("video");
+                    if (self.videoElement) {
+                        console.log(self.videoElement)
+                        self.setupVideoEventListeners();
+                        observer.disconnect(); // Stop observing after the video is found
+                    }
+                });
+
+                observer.observe(this.$refs.videoElementWrapper, {
+                    subtree: true,
+                    childList: true
+                });
+            }
+                    
+        }
+    }
+}               

package/dist/views/components/mediaplayer/mediaPlayer_stickyWrapper.hbs

@@ -1,5 +1,4 @@
-
-<div x-data="stickyPlayer" class="relative ar-16-9" x-intersect:leave.threshold.45="inViewport = false" x-intersect:enter.threshold.45="inViewport = true; videoWasStopedWhenSticky = false">
+<div x-data="stickyPlayer" ax-load x-ignore class="relative ar-16-9" x-intersect:leave.threshold.45="inViewport = false" x-intersect:enter.threshold.45="inViewport = true; videoWasStopedWhenSticky = false">
     <div x-ref="videoElementWrapper"
         class="transition-all lg:transition-none right-4" 
         :class="{   'ar-16-9 w-1/2 max-w-70 sm:w-70 fixed z-300 animate-fade-right animate-once animate-duration-1000': shouldVideoBeFixed(),
@@ -17,77 +16,4 @@
             </div>
         </button>	
     </div>
-    <script>
-        var stickyPlayer = () => {
-            return {
-                eventListenerInitialized: false,
-                inViewport: true, 
-                videoStarted: false,
-                videoStoped: true,
-                videoPlaying: false,
-                videoWasStopedWhenSticky: false,
-                videoWasClosedByUser: false,
-                videoElement: null,
-
-                shouldVideoBeFixed: function () {
-                    return (!this.inViewport && this.videoPlaying) || (!this.inViewport && this.videoWasStopedWhenSticky) 
-                },
-                setupVideoEventListeners: function () {
-                    console.log("setupVideoEventListeners");
-                    if(!this.eventListenerInitialized) {                          
-                        this.videoElement.addEventListener("play", () => {
-                            console.log("video:play");
-                            this.videoStarted = true;
-                            this.videoPlaying = true;
-                            this.videoStoped = false;
-                        });
-                        this.videoElement.addEventListener("pause", () => {
-                            console.log("video:pause");
-                            this.videoPlaying = false;
-                            this.videoStoped = true;
-                            if (!this.inViewport ) {
-                                if(this.videoWasClosedByUser){
-                                    this.videoWasClosedByUser = false
-                                } else {
-                                    this.videoWasStopedWhenSticky = true;
-                                }                               
-                            }
-                        });
-                        this.eventListenerInitialized = true;
-                    }
-                },
-                closeVideo: function () {
-                    this.videoWasStopedWhenSticky = false;
-                    this.videoWasClosedByUser = true;
-                    this.videoElement.pause();                 
-                },
-                init: function () {
-                    this.videoElement = this.$refs.videoElementWrapper.querySelector("video");
-                    if(this.videoElement) {
-                        this.setupVideoEventListeners();
-                    } else {
-                        console.log("No video element found in sticky player.");
-                        const self = this; // Save a reference to the Alpine instance
-                        const observer = new MutationObserver(function() {
-                            console.log("MutationObserver: Mutation observed in sticky player.");
-                            
-                            // Re-check for the video element
-                            self.videoElement = self.$refs.videoElementWrapper.querySelector("video");
-                            if (self.videoElement) {
-                                console.log(self.videoElement)
-                                self.setupVideoEventListeners();
-                                observer.disconnect(); // Stop observing after the video is found
-                            }
-                        });
-
-                        observer.observe(this.$refs.videoElementWrapper, {
-                            subtree: true,
-                            childList: true
-                        });
-                    }
-                    
-                },
-            }
-        }               
-    </script>
 </div>

package/dist/views/components/page/components/metadatabox.hbs

@@ -6,10 +6,10 @@
 
                 {{#if _showDate }}
                     {{#if this.hasMoreThanOneAuthor}}
-                        {{> components/page/components/publicationdate }}
+                        {{> components/page/components/publicationdate _isTicker=_isTicker}}
                     {{else}}
                         {{#unless this.hasOneAuthor}}
-                            {{> components/page/components/publicationdate }}
+                            {{> components/page/components/publicationdate _isTicker=_isTicker}}
                         {{/unless}}
                     {{/if}}
                 {{/if}}

package/dist/views/components/page/components/publicationdate.hbs

@@ -7,6 +7,10 @@
             {{~else}}
                 {{#if this.isPublicationDate ~}}
                     <time datetime="{{this.htmlDateTime}}">{{loca "date_published" this.date this.time }}</time>
+                {{else}}
+                    {{#if ../_isTicker ~}}
+                        <time datetime="{{this.htmlDateTime}}">{{loca "date_lastChanged" this.date this.time }}</time>
+                    {{~/if}}
                 {{~/if}}
             {{~/if}}
                

package/dist/views/components/page/ticker/ticker.hbs

@@ -0,0 +1,8 @@
+<article class="grid items-start bg-white dark:bg-black grid-article">
+    <div class="mb-6 lg:mb-13 article-narrow md:article-breakout">
+        header
+    </div>
+    <div class="c-ticker__timelineWrapper article-full-width lg:article-breakout">
+        section
+    </div>
+</article>

package/dist/views_static/components/mediaplayer/mediaPlayer_stickyWrapper.hbs

@@ -1,5 +1,4 @@
-
-<div x-data="stickyPlayer" class="relative ar-16-9" x-intersect:leave.threshold.45="inViewport = false" x-intersect:enter.threshold.45="inViewport = true; videoWasStopedWhenSticky = false">
+<div x-data="stickyPlayer" ax-load x-ignore class="relative ar-16-9" x-intersect:leave.threshold.45="inViewport = false" x-intersect:enter.threshold.45="inViewport = true; videoWasStopedWhenSticky = false">
     <div x-ref="videoElementWrapper"
         class="transition-all lg:transition-none right-4" 
         :class="{   'ar-16-9 w-1/2 max-w-70 sm:w-70 fixed z-300 animate-fade-right animate-once animate-duration-1000': shouldVideoBeFixed(),
@@ -17,77 +16,4 @@
             </div>
         </button>	
     </div>
-    <script>
-        var stickyPlayer = () => {
-            return {
-                eventListenerInitialized: false,
-                inViewport: true, 
-                videoStarted: false,
-                videoStoped: true,
-                videoPlaying: false,
-                videoWasStopedWhenSticky: false,
-                videoWasClosedByUser: false,
-                videoElement: null,
-
-                shouldVideoBeFixed: function () {
-                    return (!this.inViewport && this.videoPlaying) || (!this.inViewport && this.videoWasStopedWhenSticky) 
-                },
-                setupVideoEventListeners: function () {
-                    console.log("setupVideoEventListeners");
-                    if(!this.eventListenerInitialized) {                          
-                        this.videoElement.addEventListener("play", () => {
-                            console.log("video:play");
-                            this.videoStarted = true;
-                            this.videoPlaying = true;
-                            this.videoStoped = false;
-                        });
-                        this.videoElement.addEventListener("pause", () => {
-                            console.log("video:pause");
-                            this.videoPlaying = false;
-                            this.videoStoped = true;
-                            if (!this.inViewport ) {
-                                if(this.videoWasClosedByUser){
-                                    this.videoWasClosedByUser = false
-                                } else {
-                                    this.videoWasStopedWhenSticky = true;
-                                }                               
-                            }
-                        });
-                        this.eventListenerInitialized = true;
-                    }
-                },
-                closeVideo: function () {
-                    this.videoWasStopedWhenSticky = false;
-                    this.videoWasClosedByUser = true;
-                    this.videoElement.pause();                 
-                },
-                init: function () {
-                    this.videoElement = this.$refs.videoElementWrapper.querySelector("video");
-                    if(this.videoElement) {
-                        this.setupVideoEventListeners();
-                    } else {
-                        console.log("No video element found in sticky player.");
-                        const self = this; // Save a reference to the Alpine instance
-                        const observer = new MutationObserver(function() {
-                            console.log("MutationObserver: Mutation observed in sticky player.");
-                            
-                            // Re-check for the video element
-                            self.videoElement = self.$refs.videoElementWrapper.querySelector("video");
-                            if (self.videoElement) {
-                                console.log(self.videoElement)
-                                self.setupVideoEventListeners();
-                                observer.disconnect(); // Stop observing after the video is found
-                            }
-                        });
-
-                        observer.observe(this.$refs.videoElementWrapper, {
-                            subtree: true,
-                            childList: true
-                        });
-                    }
-                    
-                },
-            }
-        }               
-    </script>
 </div>

package/dist/views_static/components/page/components/metadatabox.hbs

@@ -6,10 +6,10 @@
 
                 {{#if _showDate }}
                     {{#if this.hasMoreThanOneAuthor}}
-                        {{> components/page/components/publicationdate }}
+                        {{> components/page/components/publicationdate _isTicker=_isTicker}}
                     {{else}}
                         {{#unless this.hasOneAuthor}}
-                            {{> components/page/components/publicationdate }}
+                            {{> components/page/components/publicationdate _isTicker=_isTicker}}
                         {{/unless}}
                     {{/if}}
                 {{/if}}

package/dist/views_static/components/page/components/publicationdate.hbs

@@ -7,6 +7,10 @@
             {{~else}}
                 {{#if this.isPublicationDate ~}}
                     <time datetime="{{this.htmlDateTime}}">{{loca "date_published" this.date this.time }}</time>
+                {{else}}
+                    {{#if ../_isTicker ~}}
+                        <time datetime="{{this.htmlDateTime}}">{{loca "date_lastChanged" this.date this.time }}</time>
+                    {{~/if}}
                 {{~/if}}
             {{~/if}}
                

package/dist/views_static/components/page/ticker/ticker.hbs

@@ -0,0 +1,8 @@
+<article class="grid items-start bg-white dark:bg-black grid-article">
+    <div class="mb-6 lg:mb-13 article-narrow md:article-breakout">
+        header
+    </div>
+    <div class="c-ticker__timelineWrapper article-full-width lg:article-breakout">
+        section
+    </div>
+</article>

package/package.json

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

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

@@ -217,7 +217,7 @@
             minmax(var(--mobile-padding), var(--desktop-padding)) [full-width-end];
         grid-column: main;
     }
-    .grid-article > :not(.article-breakout, .article-full-width, .sticky) {
+    .grid-article > :not(.article-breakout, .article-full-width, .article-narrow, .sticky) {
         grid-column: narrow;
     }
     .article-breakout {

package/src/assets/js/alpine.js

@@ -10,14 +10,13 @@ import mainNavigationHandler from 'components/site_header/mainNavigationHandler.
 import flyoutHandler from 'components/site_header/flyoutHandler.alpine'
 import overlayHandler from 'components/site_header/overlayHandler.alpine'
 import dropdown from 'components/site_header/dropdown.alpine'
- 
 
 AsyncAlpine.init(Alpine)
     .data('podcastPlayer', () => import('components/podcast/podcast_player.alpine.js'))
     .data('slider', () =>
         import('components/horizontal_scroll_container/horizontal_scroll_container.alpine.js')
     )
-    
+    .data('stickyPlayer', () => import('components/mediaplayer/stickyPlayer.alpine.js'))
     .data('socialSharingHandler', ()=> import('components/social_sharing/socialSharingHandler.alpine.js'))
     .data('inputHandler', ()=> import('components/forms/js/inputHandler.alpine.js'))
     .data('contactForm', ()=> import('components/forms/js/contactForm.alpine.js'))

package/src/stories/views/components/mediaplayer/mediaPlayer_stickyWrapper.hbs

@@ -1,5 +1,4 @@
-
-<div x-data="stickyPlayer" class="relative ar-16-9" x-intersect:leave.threshold.45="inViewport = false" x-intersect:enter.threshold.45="inViewport = true; videoWasStopedWhenSticky = false">
+<div x-data="stickyPlayer" ax-load x-ignore class="relative ar-16-9" x-intersect:leave.threshold.45="inViewport = false" x-intersect:enter.threshold.45="inViewport = true; videoWasStopedWhenSticky = false">
     <div x-ref="videoElementWrapper"
         class="transition-all lg:transition-none right-4" 
         :class="{   'ar-16-9 w-1/2 max-w-70 sm:w-70 fixed z-300 animate-fade-right animate-once animate-duration-1000': shouldVideoBeFixed(),
@@ -17,77 +16,4 @@
             </div>
         </button>	
     </div>
-    <script>
-        var stickyPlayer = () => {
-            return {
-                eventListenerInitialized: false,
-                inViewport: true, 
-                videoStarted: false,
-                videoStoped: true,
-                videoPlaying: false,
-                videoWasStopedWhenSticky: false,
-                videoWasClosedByUser: false,
-                videoElement: null,
-
-                shouldVideoBeFixed: function () {
-                    return (!this.inViewport && this.videoPlaying) || (!this.inViewport && this.videoWasStopedWhenSticky) 
-                },
-                setupVideoEventListeners: function () {
-                    console.log("setupVideoEventListeners");
-                    if(!this.eventListenerInitialized) {                          
-                        this.videoElement.addEventListener("play", () => {
-                            console.log("video:play");
-                            this.videoStarted = true;
-                            this.videoPlaying = true;
-                            this.videoStoped = false;
-                        });
-                        this.videoElement.addEventListener("pause", () => {
-                            console.log("video:pause");
-                            this.videoPlaying = false;
-                            this.videoStoped = true;
-                            if (!this.inViewport ) {
-                                if(this.videoWasClosedByUser){
-                                    this.videoWasClosedByUser = false
-                                } else {
-                                    this.videoWasStopedWhenSticky = true;
-                                }                               
-                            }
-                        });
-                        this.eventListenerInitialized = true;
-                    }
-                },
-                closeVideo: function () {
-                    this.videoWasStopedWhenSticky = false;
-                    this.videoWasClosedByUser = true;
-                    this.videoElement.pause();                 
-                },
-                init: function () {
-                    this.videoElement = this.$refs.videoElementWrapper.querySelector("video");
-                    if(this.videoElement) {
-                        this.setupVideoEventListeners();
-                    } else {
-                        console.log("No video element found in sticky player.");
-                        const self = this; // Save a reference to the Alpine instance
-                        const observer = new MutationObserver(function() {
-                            console.log("MutationObserver: Mutation observed in sticky player.");
-                            
-                            // Re-check for the video element
-                            self.videoElement = self.$refs.videoElementWrapper.querySelector("video");
-                            if (self.videoElement) {
-                                console.log(self.videoElement)
-                                self.setupVideoEventListeners();
-                                observer.disconnect(); // Stop observing after the video is found
-                            }
-                        });
-
-                        observer.observe(this.$refs.videoElementWrapper, {
-                            subtree: true,
-                            childList: true
-                        });
-                    }
-                    
-                },
-            }
-        }               
-    </script>
 </div>

package/src/stories/views/components/mediaplayer/stickyPlayer.alpine.js

@@ -0,0 +1,71 @@
+export default function stickyPlayer() {
+    return {    
+        eventListenerInitialized: false,
+        inViewport: true, 
+        videoStarted: false,
+        videoStoped: true,
+        videoPlaying: false,
+        videoWasStopedWhenSticky: false,
+        videoWasClosedByUser: false,
+        videoElement: null,
+
+        shouldVideoBeFixed: function () {
+            return (!this.inViewport && this.videoPlaying) || (!this.inViewport && this.videoWasStopedWhenSticky) 
+        },
+        setupVideoEventListeners: function () {
+            console.log("setupVideoEventListeners");
+            if(!this.eventListenerInitialized) {                          
+                this.videoElement.addEventListener("play", () => {
+                    console.log("video:play");
+                    this.videoStarted = true;
+                    this.videoPlaying = true;
+                    this.videoStoped = false;
+                });
+                this.videoElement.addEventListener("pause", () => {
+                    console.log("video:pause");
+                    this.videoPlaying = false;
+                    this.videoStoped = true;
+                    if (!this.inViewport ) {
+                        if(this.videoWasClosedByUser){
+                            this.videoWasClosedByUser = false
+                        } else {
+                            this.videoWasStopedWhenSticky = true;
+                        }                               
+                    }
+                });
+                this.eventListenerInitialized = true;
+            }
+        },
+        closeVideo: function () {
+            this.videoWasStopedWhenSticky = false;
+            this.videoWasClosedByUser = true;
+            this.videoElement.pause();                 
+        },
+        init: function () {
+            this.videoElement = this.$refs.videoElementWrapper.querySelector("video");
+            if(this.videoElement) {
+                this.setupVideoEventListeners();
+            } else {
+                console.log("No video element found in sticky player.");
+                const self = this; // Save a reference to the Alpine instance
+                const observer = new MutationObserver(function() {
+                    console.log("MutationObserver: Mutation observed in sticky player.");
+                    
+                    // Re-check for the video element
+                    self.videoElement = self.$refs.videoElementWrapper.querySelector("video");
+                    if (self.videoElement) {
+                        console.log(self.videoElement)
+                        self.setupVideoEventListeners();
+                        observer.disconnect(); // Stop observing after the video is found
+                    }
+                });
+
+                observer.observe(this.$refs.videoElementWrapper, {
+                    subtree: true,
+                    childList: true
+                });
+            }
+                    
+        }
+    }
+}               

package/src/stories/views/components/page/components/metadatabox.hbs

@@ -6,10 +6,10 @@
 
                 {{#if _showDate }}
                     {{#if this.hasMoreThanOneAuthor}}
-                        {{> components/page/components/publicationdate }}
+                        {{> components/page/components/publicationdate _isTicker=_isTicker}}
                     {{else}}
                         {{#unless this.hasOneAuthor}}
-                            {{> components/page/components/publicationdate }}
+                            {{> components/page/components/publicationdate _isTicker=_isTicker}}
                         {{/unless}}
                     {{/if}}
                 {{/if}}

package/src/stories/views/components/page/components/publicationdate.hbs

@@ -7,6 +7,10 @@
             {{~else}}
                 {{#if this.isPublicationDate ~}}
                     <time datetime="{{this.htmlDateTime}}">{{loca "date_published" this.date this.time }}</time>
+                {{else}}
+                    {{#if ../_isTicker ~}}
+                        <time datetime="{{this.htmlDateTime}}">{{loca "date_lastChanged" this.date this.time }}</time>
+                    {{~/if}}
                 {{~/if}}
             {{~/if}}
                

package/src/stories/views/components/page/ticker/ticker.hbs

@@ -0,0 +1,8 @@
+<article class="grid items-start bg-white dark:bg-black grid-article">
+    <div class="mb-6 lg:mb-13 article-narrow md:article-breakout">
+        header
+    </div>
+    <div class="c-ticker__timelineWrapper article-full-width lg:article-breakout">
+        section
+    </div>
+</article>