Bug: Helix 5 Upgrade - CSS Issues across the Volvo Trucks US site

[KJohnsn]

URL https://www.volvotrucks.us/

Browsers Chrome, Safari, Edge

Description There was a conversion to Helix v5 which occured on 4/17/24 which the code upgrade is reflected in this github ticket: https://github.com/hlxsites/vg-volvotrucks-us/pull/604

The link for the updated Helix version applied to the Volvo Trucks US site is: https://helix-v5--vg-volvotrucks-us--hlxsites.aem.live/

After the conversion was applied to the volvotrucks.us site, there were a number of CSS related issues that arose from it which will need to be addressed.

The following issues were found after the conversion:

Sitewide: Old PDP as an example: Using pop up modal does not work for videos etc. Attribute being called “Inert” disables all elements and load modal. This fails and causes the user to have to refresh the page.

Homepage: The Volvo logo is too large: CTA buttons in hero are missing the styling (surround and text styling)

Button styling: CTA button styling is broken

Button on the video component

PDP – CTA for the Secondary page navigation is not working (does not open the popup). When the user selects the pup-up button “explore exterior” all functions on the page fail. I.e. the user has to refresh the browser and no navigation item work as expected. Investigation is that a Javascript failure causes this issue.

Non- new PDP pages: using old header sub navigation (dark bar). When scrolling, content is displaying behind bar covering the header.

News Items: Landing page shows content, however when selecting an article we see the page has a header (dark bar) that is blank and no content shows / displays to the users.

Navigation bar links: When you click on the links in the sub navigation bar, nothing occurs https://www.volvotrucks.us/trucks/all-new-vnl/#interior

Magazine: The Magazine sections has some portions of the header showing and the article is blank.

Teaser images: Also affecting the button styles on teaser images:

PR and Magazine There is an issue with the PRs and Magazine showing the display property:

Broken Images There are instances of broken images in the All New VNL section

After the CSS issues have been fixed, then the site would need go through another spot check and testing prior to release.

[ZoeBeykirch]

These bugs are no longer on prod now that the Helix 5 upgrade was reverted, but when we do the upgrade, we should be aware of how to address these issues.

[mollyaljenkins]

Tickets #621 and #625 are dependent on this work