FR: MT Powertrain V2 Slider Block

[DanielaPedrochevd]

Agile requirement
As a content editor, I want to be able to add a block that contains an image, a title, and a button with a white or grey background to achieve the design.

Description
Develop a block with two variants.

• 1 Variant that contains an image, a title (GT America Font Family), and a button.
• The other variant should contain 2 images overlapped displayed with a slider through the middle, descriptive text added by the content editor, model name added by the content editor related to the images, and a title.

The design follows these figma files:

1. https://www.figma.com/file/oNwe2jHIICPMIe551EY62l/Mack-Reskin---Full-Project?type=design&node-id=9765-36723&mode=dev
2. (https://www.figma.com/file/oNwe2jHIICPMIe551EY62l/Mack-Reskin---Full-Project?type=design&node-id=9765-34287&mode=design) -> First Variant

The different background colors will be handled by the sections.

Acceptance criteria

• As a content editor, I can add the new block to any page. I can add:
  • Title
  • Description text (optional)
  • Image
  • Second image (optional)
  • Model name text associated to the images (optional)
  • Link of a button (optional)
• On mobile, the image will be as wide as the viewport. On desktop, it will be as wide as the content wrapper (1040px)
• On desktop, the description text would be aligned at the same height as the heading, on the right. The alignment and sizing needs to be the same as done in Tabbed Carousel variant for wheelbase #190
• For the comparison variant, the model names would take maximum 50% of the width and would be aligned to either corner of the wrapper. If the content is too long, it will wrap.
• For the comparison variant, as a user, I can compare both images using the above-mentioned slider dragging it left or right.

Solution Direction
https://cloudfour.com/thinks/building-an-accessible-image-comparison-web-component/

[DanielaPedrochevd]

@WendyKruger @HaycockJill The figma file https://www.figma.com/file/oNwe2jHIICPMIe551EY62l/Mack-Reskin---Full-Project?type=design&node-id=2220-82436&mode=dev contains extra text that is not displayed in the block's desktop version. We consider this a design discrepancy and will go for the desktop design, the mobile viewport design should be the same (no extra description text).

[DanielaPedrochevd]

@WendyKruger @HaycockJill As it is very complex to achieve the "comparison slider functionality" within a section of the Mack Trucks Features block #191 Would you agree we add said slider to this block instead to achieve the comparison look?

[WendyKruger]

@WendyKruger @HaycockJill As it is very complex to achieve the "comparison slider functionality" within a section of the Mack Trucks Features block #191 Would you agree we add said slider to this block instead to achieve the comparison look?

I'm open to seeing what that would look like.

[WendyKruger]

@WendyKruger @HaycockJill The figma file https://www.figma.com/file/oNwe2jHIICPMIe551EY62l/Mack-Reskin---Full-Project?type=design&node-id=2220-82436&mode=dev contains extra text that is not displayed in the block's desktop version. We consider this a design discrepancy and will go for the desktop design, the mobile viewport design should be the same (no extra description text).

Yes, definitely a design error. Not sure why that text is in there to be honest. But... would we be able to have the option for text in both the desktop and mobile? Ok to make this an enhancement if needed.

[markovukiceviccn]

@DanielaPedrochevd
I assume we should use responsive images here like in Hero block?

[DanielaPedrochevd]

Yes, please but keep in mind AC "For the comparison variant, the model names would take maximum 50% of the width and would be aligned to either corner of the wrapper. If the content is too long, it will wrap." and "On mobile, the image will be as wide as the viewport. On desktop, it will be as wide as the content wrapper (1040px)"

[markovukiceviccn]

@DanielaPedrochevd
May you show me the image resources for responsive images?

[DanielaPedrochevd]

@WendyKruger Can you support Marko on the above comment? In the meantime, he will use a dummy image to continue development.

[girishdigrajkar]

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

Summary:

1. Block sizing was observed incorrect however, then got clarification to use revised one from Syb; Sizing is correct
   https://www.figma.com/file/oNwe2jHIICPMIe551EY62l/Mack-Reskin---Full-Project?type=design&node-id=9765-36808&mode=design&t=L5N2r8ysKPH60h3Q-4
2. Mobile / Tablet viewport looks correct except Ipad 8 +chrome shows distorted slider: [SB] This is unsupported iOS 14 hence, this issue is not considered.