FR: Powertrain performance graph and specs adapted to work with new re-design style

[ZoeBeykirch]

Agile requirement:
As a content editor, I want to use the newly re-designed blocks on the powertrain pages without it impacting the design of the current performance specifications engine graphs that are published on the website.

Description:
With the current solution, when a content editor adds any redesign block to the current Powertrain web pages, the engine performance graphs and engine specifications sections are negatively impacted distorting the UX, as seen in this example and screen shot below.

To improve the user experience, the engine specs and graph design should be adjusted to fit in harmony with the newly redesigned blocks which require the new redesign metadata style applied to the entire web page.

Acceptance Criteria:

• Content editor is able to use redesign blocks on the powertrain pages without it changing the engine specs and graph section that is currently in production (seen in below screen shot)
• Refactoring performance specification block to work with redesign styling

• Figma designs for reference

Out of scope

• Making sub-navigation, and hero compatible with redesign pages (should be refactored if it needs to be used)

Note

• Test change has already been conducted by Syb, needing confirmation that this is the desired solution: https://519-engine-specifications--vg-volvotrucks-us--hlxsites.hlx.page/trucks/powertrain/d11/new#performance-specifications
• Answer: Yes, the above link is the desired result.

Enhancement of Mobile Experience:

• Cut off the edges of the graph to make the digits in the graph longer
• Change typography
• Showing fade / gradient again

[cogniSyb]

My findings on the page

• Sub navigation shouldn’t be used on a redesign page, or we should refactor it (and the hero)
• We should take a look at adjusting the page and usage of blocks, taking into account other Powertrain pages

My findings on the block

• Focus of resolving this issue should be on all instances of that block
• Performance Specifications graph should be refactored a bit
• Performance Specifications graph could be a variant of or reuse code of Media with Tabs. This is to be investigated
• Engine Specifications part should be using styles like the Truck Configurator

[cogniSyb]

Another observation: the graph is not rendering correctly on Firefox:

This is due to the fact that we have a path output containing commas. Changing return plotedLine; to return plotedLine.join(' '); and fixing the viewBox will resolve this issue.

[mollyaljenkins]

@ZoeBeykirch @cogniSyb Can we discuss this issue further ?

[ZoeBeykirch]

@cogniSyb @mollyaljenkins Confirming yes, this solution is the desired state (which hopefully will decrease the current HL estimate for story points) - https://519-engine-specifications--vg-volvotrucks-us--hlxsites.hlx.page/trucks/powertrain/d11/new#performance-specifications

[Joesturbo]

@mollyaljenkins - can we review the amount of time on this item, reflection on the work completed with the Mack solution?

[mollyaljenkins]

Solution: https://519-engine-specifications--vg-volvotrucks-us--hlxsites.hlx.page/trucks/powertrain/d11/new#performance-specifications

[girishdigrajkar]

Validated and able to see the correct results and hence, this issue could be closed :
Desktop:

Mobile:

Tablet: