FR: Applications Module

[mollyaljenkins]

Context/Description

As a fleet owner, I want to get information about the various applications of the All-New Volvo VNR so that I can ensure that it will meet my specific needs.

Acceptance Criteria

User AC:

• The user's scroll should be locked/jacked to the applications component until the user has finished scrolling all the way through and the 1st position (left-most) card should be in an active state indicated by a colour change and stroke, while the other cards remain in default state
• The first image displayed should be the image that was authored to be associated with the 1st card
• While the user scrolls the 1st position card should transition to a default state and the second position card should transition to an active state, at the same time the image area should fade the image to show the image that associated with the scrollable icon card in position 2
• The scrollling process will continue until the user reaches the last card configured within the component

Editor AC:

• Content editors can copy and paste the V2 Applications Carousel block from the Sidekick Library.
• Content editors can use the block on any page.

Non-functional AC:

• Images are full width
• The component stores mobile friendly versions of all images
• The default number of applications is 5
• The component stores 1 image for each of the scrollable icon cards that are authored for this component
• Given that the user clicks on the secondary navigation to navigate to a different section of the PDP, the locked/jacked scrolling should be bypassed and the user should be taken to the section they selected in the secondary navigation.
• The image zooms out as the application block is scrolled through, there are two images available for each application for this functionality
• The maximum number of images will be 6, and minimum will be 3
• The images and icons are not clickable
• A new V2 Applications Carousel block is made in the Sidekick Library
• Mobile Image aspect ratio is 3:4
• Desktop Image aspect ratio is 16:9

Out of scope

No response

Note

Volvo Block
V2 Media Gallery https://www.volvotrucks.us/trucks/all-new-vnl/#interior
Mack:
V2 Truck Features (anthem trucks page)

Technical details

Interaction Example:
https://www.apple.com/apple-intelligence/

Attachment / link to Figma

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

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

[mollyaljenkins]

Questions:

• Maximum and minimum number of cards - Mix of 3, Max of 6
• Are the card clickable - No
• Will the mobile swipe be vertical or horizontal for scrolling behaviour - vertical to mimic the same effect as desktop, unless the device is on landscape view then it will just present 1 static image with no movement.

[ZoeBeykirch]

Questions are answered and ticket is updated to reflect this new information!

[mollyaljenkins]

Requires mobile vertical images from Volvo for implementation @williebender