FR: Specs Module

[mollyaljenkins]

Context/Description

As a fleet owner viewing the VNR PDP, I want to see and find detailed information about the all-new VNR so that I can know more about the VNR at-a-glance and make an informed buying decision.

Acceptance Criteria

User AC:

• When the user scrolls below the carousel the user should see the specs component
• The component should link to the model carousel (the content displayed within the specs component should be associated with the model in the selected state within the carousel)
• The specs component should have a vertical tab to the left with a content area to the right the top tab should be selected as default state
• Content for the vertical tab is as follows:
  HIGHLIGHTS
  TRIM OPTIONS
  POWERTRAIN
  DRIVER PRODUCTIVITY
  SAFETY
  CONNECTIVITY
• When a new tab is selected the content area displays the information authored
• The content area is sectioned into three columns (icons with label, image cards or plain test list is supported)
• If the content area is populated with items left to right
• When the user scrolls up and changes the truck model in the carousel, the tab that is selected in the carousel will update to reflect the selected truck

Mobile AC:

• The left tabs should condense into accordions and the top tab should be the first accordion open by default
• If the content area is populated with text, the content are grid should condense from three coloumns to two, the third coloumn should start wrapping down
• If the content are is populated with image cards, the content area should condense to a single column and the image cards should be stacked, the row title label should be above the first image card in the row and the image sub-copy should be below each image, each row is stacked
• When the user opens a new accordion item it should collapse the previous item
• When the user scrolls up and changes the truck model in the carousel, the tab that is selected in the carousel will update to reflect the selected truck

Editor AC:

• This block is added to the Sidekick Library

Non-functional AC:

Out of scope

• Lineup to be handled in ticket

Note

No response

Technical details

No response

Attachment / link to Figma

Desktop:
https://www.figma.com/design/Id3nd9kbfh8TpS1SfWhrW2/Volvo-Component-Library?node-id=5093-1916&node-type=canvas&t=0rfFe64ZOKzWWC7w-0
Desktop Prototype:
https://www.figma.com/proto/Id3nd9kbfh8TpS1SfWhrW2/Volvo-Component-Library?node-id=5093-3637&node-type=frame&t=g2nlAxJlKAeTSsDX-1&scaling=min-zoom&content-scaling=fixed&page-id=5093%3A1916&starting-point-node-id=5093%3A3637&show-proto-sidebar=1

Mobile:
https://www.figma.com/design/Id3nd9kbfh8TpS1SfWhrW2/Volvo-Component-Library?node-id=5093-3614&t=0rfFe64ZOKzWWC7w-1
Mobile Prototype:
https://www.figma.com/proto/Id3nd9kbfh8TpS1SfWhrW2/Volvo-Component-Library?node-id=5093-3661&node-type=symbol&t=fegykffCQX4udHvb-1&scaling=min-zoom&content-scaling=fixed&page-id=5093%3A1916&starting-point-node-id=5093%3A3661&show-proto-sidebar=1