FR: Countdown in hero (1 of 4)

[BeckyMedlin]

User Story

As a long-haul customer interested in buying a new truck, I want to sign up to receive updates so that I can be kept up-to-date about M1.

Context/Description

MT teaser for M1 needs to include a hero countdown clock during the pre-reveal phase.
Leverage existing code from previous VNL launch. Netcentric/vg-volvotrucks-us-rd#66

Add the countdown in the section metadata for the hero (with the time and the date) and only load the countdown block when this date or time metadata is on the page.

###Assumptions:
When the countdown runs out then all the values would be 00.

If the user is visiting the page while the event is being live or have been expired then the countdown will not be displayed.

The date format should be in ISO 8601 format. E.g '2023-11-20T14:00:00.000Z'. Editors can add this date in the section meta data. Default time zone should be EST.

Countdown should start from April 8, 2025.

See design: https://www.figma.com/design/apGFsQv4eiZuJ9N6DxCFIm/M1-Teaser-landing-page?node-id=0-1&t=tmh2YYAhwPJpN9lX-1
Figma includes both Desktop and Mobile designs.

Acceptance Criteria

User AC:

• The countdown will be shown below the title in the hero

• All digits need to be shown on the same line

• The digits need to be using font-feature-settings: 'tnum'; to maintain alignment

• Granularity will be days/hours/minutes/seconds

• All numbers will have two digits. When needed, use a leading zero. For example: "04" or "20"

• A date should be set by a content editor.

• Editors should be able to left-justify text.

• Colors and Mack Trucks branding guidelines need to be followed.

• A new "bold" font should be included.

Work for form will be handled in #145 (see Out of Scope).

Editor AC:

Non-functional AC:

Out of scope

• FR: Countdown - Contact form (2 of 4) #145
• What needs to display when the countdown reaches 00:00:00:00 will be handled in a separate ticket FR: Countdown in hero - content displayed / restream integration (3 of 4) #154 (decision pending).

Technical details

No response

Attachment / link to Figma

No response

[mollyaljenkins]

Finalized design in Figma needed with day:hour:minute:second format @WendyKruger

[Meli-lazarte]

A separate tickt will be created for the form section.

[BeckyMedlin]

@ryanropero @WendyKruger Need details for the MCAE form needed for the countdown page, which will be handled in a separate ticket.

[BeckyMedlin]

Per @WendyKruger, decision on what to display once the countdown reaches 00:00:00:00 is still to be determined. This will need to be addressed in a separate ticket. @Meli-lazarte

[alan-le-bihan]

Question and comments about some of the AC:

• A new 'bold' font should be included: could clarification be provided on which font is being referred to and which text it should be applied to? The font available in Figma for the digits has been included. Does this address the AC?
• Editors should be able to left-justify text: this is already the default behaviour when adding text.

[BeckyMedlin]

@amglebihan Yes, the font in the Figma addresses the AC. Regarding the other items, that's fine. Thank you!

[AsmitKMishra]

Testing Completed. Feature works as expected. And fulfils the acceptance criteria.
Mobile:

Desktop: