FR: Lineup Enhancements (1 of 2)

[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 is viewing the model carousel they should see the swatches below the truck images, the component should store the images for all the trucks in all of the colours that are configured for the swatches
• [ ] The first colour on the left of the swatches should be the selected state
• [ ] When the user selects a new swatch this should become the selected state, all the trucks in the lineup should transition to the colour of the newly selected swatch
• [ ] When the user selects Build Yours on a specific VNR model within the model carousel the user should be taken to the model selection page of the VNR configurator and the same model that the user had selected should be the selected model within the configurator model selection page
• [ ] When the user clicks "Compare Models" on a specific VNR model within the model carousel then the user should be taken to compare models modal within the configurator and the same model as previously selected should be the model selected in the first column within the comparison modal.

Mobile AC:

• [ ] The colour picker will start in the viewport but extend beyond the viewport towards the right
• [ ] The user should be able to scroll horizontally through the colour picker
• [ ] The truck images should be front view angel
• [ ] Changing the colour of the truck using the colour picker should change the colours of all the trucks with PNGs of the front view PNG

Editor AC:

Non-functional AC:

• [ ] This block should be available in the Sidekick block library
• [ ] The images of the trucks should be as close to "painted" as possible, could be done through dissolving or crossfading the PNGs

Out of scope

• [ ] The second part of this ticket will handle the Specs section of the block and the interaction between the two
• [ ] https://github.com/aemsites/volvotrucks-na/issues/121
• [ ] #129

Note

No response

Technical details

No response

Attachment / link to Figma

Annotations: https://www.figma.com/design/Id3nd9kbfh8TpS1SfWhrW2/Volvo-Component-Library?node-id=5247-22319&t=7nQtfuOJu9KNCSlU-1

Desktop: https://www.figma.com/design/Id3nd9kbfh8TpS1SfWhrW2/Volvo-Component-Library?node-id=5232-14502&t=7nQtfuOJu9KNCSlU-1

Mobile: https://www.figma.com/design/Id3nd9kbfh8TpS1SfWhrW2/Volvo-Component-Library?node-id=5232-14502&t=7nQtfuOJu9KNCSlU-1

[mollyaljenkins]

Colour selector to be handled in a seperate ticket

[mollyaljenkins]

Dependant on Rapid Images availability of data