Tabbed Carousel variant for wheelbase

[DanielaPedrochevd]

Agile Requirement

As a user, I want to be able to see how the different wheels look on the MD Series Truck in an easy user friendly way.

Description Create a new variant of the Tabbed Carousel block (#25) where the the user can see different wheelbase options as in the following design:

Acceptance Criteria

1. There is a new variant available for Tabbed Carousel to add to any page by content editors.
2. The block follows the above mentioned design and style.
   • Minimum width of tabs should be less, so that on desktop we can show all 8 items
   • Instead of motion left to right, we have a fade in/fade out effect
   • Text below header on mobile, top right on desktop. The alignment and sizing needs to be the same as done in #147
3. The background colour doesn’t have to be changed

[DanielaPedrochevd]

@HaycockJill @WendyKruger The user experience for mobile as it is displayed in the figma file is not very user-friendly. We have other places in figma that use the slider for the desktop viewport but in mobile the slider is omitted and substituted for some tabs. We suggest to do the same here. The final look would be:

For desktop, the slider as:

For mobile, we would do a similar solution as in the trucks configurations block (instead of a slider, we would use tabs):

[WendyKruger]

@HaycockJill @WendyKruger The user experience for mobile as it is displayed in the figma file is not very user-friendly. We have other places in figma that use the slider for the desktop viewport but in mobile the slider is omitted and substituted for some tabs. We suggest to do the same here. The final look would be:

For desktop, the slider as:

For mobile, we would do a similar solution as in the trucks configurations block (instead of a slider, we would use tabs):

I'm open to exploring that. But we would need to have room for up to 8 options.

[DanielaPedrochevd]

Estimation of this ticket went down because now that the specifications of the mobile version are more clear it is less complex as we have a similar solution for the tabbed carousel block.

[girishdigrajkar]

Validated and able to get the correct results and hence, marking the issue to done status.