search

Netcentric / vg-macktrucks-com-rd

Franklin Site Redesign for https://www.macktrucks.com
Apache License 2.0
1 stars 0 forks source link

Tabbed Carousel variant for wheelbase #190

Closed DanielaPedrochevd closed 6 months ago

DanielaPedrochevd commented 6 months ago

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 commented 6 months ago

@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:

Image

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

Image

WendyKruger commented 6 months ago

@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:

Image

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

Image

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

DanielaPedrochevd commented 6 months ago

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 commented 6 months ago

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