Bug: [V2 product listing] - Padding and Layout Issues

[ZoeBeykirch]

Issue Type

Bug

Summary

Incorrect formatting of the product listing for the All Trucks page. When the v2 all trucks block was combined into the v2 product listing the formatting of the former was changed and is now inconsistent with the Figma design.

Priority

Blocker

Description

The spacing and padding for the text in the v2 product listing block are incorrect, affecting several elements:

• [ ] The product title doesn't have proper spacing of 135px above
• [ ] The industry tags are displayed vertically instead of horizontally with pipes separating them.
• [ ] The buttons are positioned too far underneath the text, with excessive padding (16px instead of the required amount).
• [ ] Font size for heading is too big, should be H3

Relevant tickets: v2 all trucks issue: https://github.com/Netcentric/vg-macktrucks-com-rd/issues/55

v2 product listing issue: https://github.com/hlxsites/vg-macktrucks-com/issues/580

Affected Device Classes

Mobile, Tablet, Desktop

Affected Browsers/Devices and Versions

All

Steps to Reproduce

1. Navigate to test page that has v2-product-list block: https://main--vg-macktrucks-com--hlxsites.hlx.page/trucks/index-new
2. Observe the placement and padding spacing of the product title, industry tags, and buttons which are not consistent with the Figma requirements.
3. Link to Figma for expected results: https://www.figma.com/design/URJhT8pkntqc6h6v5wSLqx/Mack-Core-Design-Kit?m=dev&node-id=4901-12110

Expected Results

Actual Results

[mollyaljenkins]

@girishdigrajkar Please take a look for indicating size of bug. Thanks !

[girishdigrajkar]

Validated and below are the observations: Desktop:

1. Title font expected is "Helvetica Neue LT Pro" whereas it is GT America Extended
2. Spacing from top is 115px whereas expected is 135px. Also spacing below should be 65px whereas it is 108px
3. Buttons should be 160px X 48px Whereas, it is 128px X 40px

Mobile:

1. Image actual size is 375px X 196px whereas image height in figma is either 375px or 348px
2. Title font is 28px whereas expected is 32px size.
3. Button size expected is 160px X 48px whereas, actual size is 163.5px X 40px

[girishdigrajkar]

Hi @jonatan-lledo-netcentric , Revalidated and below are the results, 3items still need to be fixed : Desktop:

1. Title font expected is "Helvetica Neue LT Pro" whereas it is GT America Extended : Passed
2. Spacing from top is 115px whereas expected is 135px. Also spacing below should be 65px whereas it is 108px : Outstanding
3. Buttons should be 160px X 48px Whereas, it is 128px X 40px : Passed

Mobile:

1. Image actual size is 375px X 196px whereas image height in figma is either 375px or 348px : Outstanding (Now the Image size is 375px X 170.5px or 375px X 196px )
2. Title font is 28px whereas expected is 32px size. : Outstanding
3. Button size expected is 160px X 48px whereas, actual size is 163.5px X 40px : Passed ( Now it is 163.5px X 48px)

Regression( V2 product list - with dots) Desktop: Title Font size is 45px whereas, it is 32px in actual The text area should be 732 X400 whereas it is 640 X 400 px size Button size should be 160 X 48 whereas it is 128 X 40 Mobile: The text area expected size is 375 X 305 px whereas it is in actual 375 X 252.2 The text area bottom spacing is 24px whereas expected is 64px Button size expected is 160px X 48px whereas, it is 171.5 X 40px

[girishdigrajkar]

Hi @jonatan-lledo-netcentric / @alexiscoelho Revalidated and below are the results, below still need to be fixed /clarified : Mobile:

1. Image actual size is 375px X 196px whereas image height in figma is either 375px or 348px : Outstanding (Now the Image size is 375px X 170.5px or 375px X 196px )

Regression( V2 product list - with dots) Mobile:

1. The text area bottom spacing is 24px whereas expected is 64px
2. Button size expected is 160px X 48px whereas, it is 171.5 X 40px

[girishdigrajkar]

Revalidated and able to get the correct results and hence, closing the bug.

[girishdigrajkar]

@jonatan-lledo-netcentric @alexiscoelho @santi-homps : Please confirm if this PR is merged.